◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
css3动画怎么设置执行一次
ID:12910 / 打印在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视频教程）
