css3动画怎么设置执行一次

百变鹏仔 3个月前 (09-20) #CSS

文章标签动画

在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>

修改一下，设置动画播放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动画怎么设置执行一次

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写