《图解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

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。