CSS3实现动画实现次数怎样设定控制呢
|
很多朋友都对“CSS3实现动画实现次数怎样设置控制呢？”的内容比较感兴趣，对此小编整理了相关的知识分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获，那么感兴趣的朋友就继续往下看吧！ CSS3只能实现一次动画吗 css3不是只能实现一次动画。 利用animation-iteration-count即可。 animation-iteration-count属性定义动画应该播放多少次。默认值为一。 语法 animation-iteration-count: value; n 一个数字，定义应该播放多少次动画 infinite 指定动画应该播放无限次（永远） 示例如下： <html> <head> <meta charset="utf-8"> <title>123</title> <style> 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; } @keyframes mymove { from {top:0px;} to {top:200px;} } @-webkit-keyframes mymove /* Safari and Chrome */ { from {top:0px;} to {top:200px;} } </style> </head> <body> <p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 animation-iteration-count 属性。</p> <div></div> </body> </html> 关于“CSS3实现动画实现次数怎样设置控制呢？”就介绍到这了，如果大家觉得不错可以参考了解看看，如果想要了解更多，小编每天都会为大家更新不同的知识。 （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
