新设计人网[www.sjidea.com],努力打造为新设计服务综合资讯第一网!
全新域名:[www.sjidea.com]

新设计人资源网

css3动画怎么设置执行一次

www.sjidea.com | CSS教程 | 2022-05-22

在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指定动画应该播放无限次(永远)

示例:

设置动画只播放一次



	
		
		
	
	
		

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



感谢您的阅读标题为 《css3动画怎么设置执行一次》的文章,更多教程内容可关注新设计人网。