• 技术文章 >web前端 >css教程

    css3动画怎么设置执行一次

    青灯夜游青灯夜游2022-01-13 12:50:35原创105

    在css3中,可以利用animation-iteration-count属性来设置动画执行一次,该属性的作用就是定义动画的播放次数;当animation-iteration-count属性的值设置为数字“1”时,即可设置动画只播放一次。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    在css3中,可以利用animation-iteration-count属性来设置动画执行一次。

    animation-iteration-count属性可以定义动画的播放次数,设置动画应该播放多少次。

    语法:

    animation-iteration-count: value;
    描述
    n一个数字,定义应该播放多少次动画
    infinite指定动画应该播放无限次(永远)

    示例:

    设置动画只播放一次

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style>
    			div {
    				width: 100px;
    				height: 100px;
    				background: red;
    				position: relative;
    				animation: mymove 3s;
    				animation-iteration-count: 1;
    
    				/* Safari and Chrome */
    				-webkit-animation: mymove 3s;
    				-webkit-animation-iteration-count: 1;
    			}
    
    			@keyframes mymove {
    				from {
    					top: 0px;
    				}
    
    				to {
    					top: 200px;
    				}
    			}
    
    			@-webkit-keyframes mymove
    
    			/* Safari and Chrome */
    				{
    				from {
    					top: 0px;
    				}
    
    				to {
    					top: 200px;
    				}
    			}
    		</style>
    	</head>
    	<body>
    		<div></div>
    
    	</body>
    </html>

    1.gif

    修改一下,设置动画播放3次

    div {
    	width: 100px;
    	height: 100px;
    	background: red;
    	position: relative;
    	animation: mymove 3s;
    	animation-iteration-count: 3;
    
    	/* Safari and Chrome */
    	-webkit-animation: mymove 3s;
    	-webkit-animation-iteration-count: 3;
    }

    2.gif

    (学习视频分享:css视频教程

    以上就是css3动画怎么设置执行一次的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:HTML+CSS+JS实现雪花飘扬(代码分享) 下一篇:手把手带你使用纯CSS实现饼状图

    相关文章推荐

    • css3怎样实现图片扇形呈现• css3旋转是绕着哪根轴旋转• CSS3 clip-path属性实战:动态区域裁剪• 常用css3基本选择器有哪些• css3使用什么属性表示左浮动

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网