站长资讯网
最全最丰富的资讯网站

css3只能实现一次动画吗

css3不是只能实现一次动画;可利用“animation-iteration-count”属性来定义动画播放的次数,当属性值设置为infinite时,播放次数为无限次,语法为“animation-iteration-count:播放次数”。

css3只能实现一次动画吗

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

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只能实现一次动画吗

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

赞(0)
分享到: 更多 (0)
网站地图   沪ICP备18035694号-2    沪公网安备31011702889846号