|
   |
| Forum » Wonder Study 寓教于乐 » Wonder Effect js/as/css分享 » css3新属性之animation动画篇 (animation, @keyframes in css3) |
| css3新属性之animation动画篇 |
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即是暂停啦  |
| |||
| |||
