• Page 1 of 1
  • 1
css3新属性之animation动画篇
首先设置关键帧啦

Code
@keyframes myanimation {
       0% {
         width:0;
       }
       100% {
         width:100%
       }
}

复杂的动画可以加帧,如果只是两帧而且是从0%和100%可以用from/to代替的(写0%的%必写)

设置好关键帧,还要设置动画啦,动画可以写为如下方式:

Code
animation:myanimation 600s linear steps(10, end) infinite alternate

从左到右依次是——

动画名;

动画播放依次持续时间;

动画播放方式(速度,默认ease就是开始和结束渐缓的正弦曲线,linear即是匀速啦);

延时,可以直接写多少s啦,用steps(10, end)即是600s十等分后,取这10个关键帧,后面的可以是start或者end,start一开始就动画,然后间隔600s/10,end则是600s/10后动画;

播放次数(写整数,infinite即是无限循环啦);

播放方向(默认是normal,alternate就是每次都反转播放啦)

也可以分开来一个个写哦——

Code
animation-name:myanimation;
animation-duration:600s;
animation-timing-function:linear;
animation-delay:steps(10, end);
animation-iteration-count:infinite;
animation-direction:alternate;


动画还有个属性叫animation-play-state,默认是running,paused即是暂停啦
  • Page 1 of 1
  • 1
Search: