css3新属性之animation动画篇 - Forum

Page 1 of 1
1

css3新属性之animation动画篇 (animation, @keyframes in css3)

css3新属性之animation动画篇

Seven

Date Fr, 2013-06-14, 11:58 | Msg 1

首先设置关键帧啦

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即是暂停啦

css3新属性之animation动画篇 (animation, @keyframes in css3)

Page 1 of 1
1