《图解CSS3》笔记4 animation动画

animation通过调用关键帧keyframe来实现动画，包括8个属性：

1. animation-name　　　　　 关键帧名称

2. animation-duration　　　　时长

3. animation-timing-function 动画函数

4. animation-delay

5. animation-interation-count 频率　　　　　　　　　　　number | "infinite"

6. animation-direction　　　　方向　　　　　　　　　　　normal | altername　　(偶数：顺序播放，奇数：倒序播放)

7. animation-paly-state　　　 播放状态　　　　　　　　　running | pause　　

8. animation-fill-mode　　　　设置时间外属性　　　　　　none(结束时反转到初始) | forward(结束时保留最后帧) | backword | both 

 

关键帧定义：

@keyframes framesName {

    from | 0% {

        ...

    }

    10%, 20%, 30% {

        ...

    }

    to | 100% {

        ...

    }

}



/* Demo */

animation: framesName 1s liear