好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

css3动画怎么设置执行一次

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

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

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

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

语法:

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

示例:

设置动画只播放一次

<!DOCTY PE  html>
<html>
	<head>
		< ;m eta charset="utf-8">
		<style>
			div {
				width: 100px;
				h ei ght: 100px;
				background:  red ;
				position: relative;
				animation: mymove 3s;
				animation-iteration-count: 1;

				/* Safari and Ch rom e */
				- webkit -animation: mymove 3s;
				-webkit-animation-iteration-count: 1;
			}

			@keyfr am es mymove {
				 From  {
					top: 0px;
				}

				to {
					top: 200px;
				}
			}

			@-webkit-keyframes mymove

			/* Safari and C hr ome */
				{
				from {
					top: 0px;
				}

				to {
					top: 200px;
				}
			}
		</style>
	</head>
	<body>
		<div></div>

	</body>
</html>

修改一下,设置动画播放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;
}

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

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

总结

以上是 为你收集整理的 css3动画怎么设置执行一次 全部内容,希望文章能够帮你解决 css3动画怎么设置执行一次 所遇到的问题。

如果觉得 网站内容还不错, 推荐好友。

查看更多关于css3动画怎么设置执行一次的详细内容...

  阅读:41次