keyframe和animation

[qingfengmy]

1. keyframe帧动画

@keyframes waves {
    0% {
        width: 0px
    }
    25% {
        width: 50px
    }
    50% {
        width: 100px
    }
    75% {
        width: 150px
    }
    100% {
        width: 200px
    }
}

waves是动画名字；里面的值除了支持百分数，还支持from和to，相当于0%和100%

2. animation

    animation-name: waves;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    /*normal:从头开始；alternate:轮流反向播放*/
    animation-direction: normal;

3. 属性动画trasiction

#20

4. 普通例子

代码： https://github.com/qingfengmy/weekend_js/tree/master/html/animation

效果：http://htmlpreview.github.io/?https://github.com/qingfengmy/weekend_js/blob/master/html/animation/index.html

5. 复杂例子

代码：https://github.com/qingfengmy/weekend_js/tree/master/html/music
效果：http://htmlpreview.github.io/?https://github.com/qingfengmy/weekend_js/blob/master/html/music/index.html

[qingfengmy]

6. 参考文章

CSS3 @keyframes 规则
CSS3 animation 属性