snrg.net
当前位置:首页 >> Css3 AnimAtion 循环 >>

Css3 AnimAtion 循环

动画中有animation-iteration-count这个属性,这个是规定播放的次数.这个属性有2个参数:1、如果是数字的话那就是播放几次后停止.2、infinite这个是无限次播放.animation-iteration-count:3;-webkit-animation-iteration-count:3;/*循环播放3次*/animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;/*无限次播放*/

主要需要使用 -webkit-animation如:-webkit-animation:gogogo 2s infinite linear ;其中gogogo是自己定义的动画帧,2s是整个动画的秒数,infinite是永久循环 linear是线性变化 (step-end则是无线性变化,直接输出结果)代码如下:CSS:@-

delay只针对第一次有效,貌似没有其他属性可以直接控制循环间隔,不过可以修改keyframes里的百分比,比如你原本的动画0%到100%,完成需要3s,间隔3s.那么将50%到100%的动画效果改成一样(相当于静止),再将完成时间改为6s.

-webkit-transition-delay:1s;-moz-transition-delay:1s;-ms-transition-delay:1s;transition-delay:1s;

animation: 动画名 动画所花费的时间 动画的速度曲线 动画开始之前的延迟 动画应该播放的次数 是否应该轮流反向播放动画;

-webkit-transition-delay:1s;-moz-transition-delay:1s;-ms-transition-delay:1s;transition-delay:1s;

animation: test 2s infinite linear ;infinite就是循环

animation-delay 属性http://www.w3school.com.cn/cssref/pr_animation-delay.asp或者你把动画的后半部分时间让他什么多不做,这样也能看着像是延时,前面的是常规的后面这个是我想的

keyframe 的话 在animation里加个infinite就OK 了

循环次数那边,写infinite.例子:animation:mymove 5s infinite;

网站首页 | 网站地图
All rights reserved Powered by www.snrg.net
copyright ©right 2010-2021。
内容来自网络,如有侵犯请联系客服。zhit325@qq.com