css3怎么实现动画只循环一次

魁首哥

作者

css3怎么实现动画只循环一次

这篇文章主要介绍了css3怎么实现动画只循环一次的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇css3怎么实现动画只循环一次文章都会有所收获，下面我们一起来看看吧。

css3动画只循环一次用“animation-iteration-count”属性设置，该属性可以规定动画的执行次数，当该属性的值为1时，可设置动画只循环一次；语法“元素{animation-iteration-count:1;}”。

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

css3动画只循环一次用animation-iteration-count属性设置。

animation-iteration-count属性可以规定动画的执行次数，定义动画应该播放多少次。

当该属性的值为1时，可设置动画只循环一次。

示例：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><style>div{width:100px;height:100px;background:red;position:relative;animation:mymove3s;animation-iteration-count:1;/*SafariandChrome*/-webkit-animation:mymove3s;-webkit-animation-iteration-count:1;}@keyframesmymove{0%{top:0px;}50%{top:200px;}100%{top:0px;}}@-webkit-keyframesmymove{/*SafariandChrome*/0%{top:0px;}50%{top:200px;}100%{top:0px;}}</style></head><body><div></div></body></html>