CSS动画

一：动画的概念

动画和过渡类似,都是可以实现一些动态的效果,
不同的是过渡需要在某个属性发生变化时才会触发动画可以自动触发动态效果。

二：@keyframes规则

如果在@keyframes规则中指定了css样式，动画将在特定时间逐渐从当前样式更改为新样式。
要使动画生效，必须将动画绑定到某个元素。

 <style>
        /* 动画代码 */
        @keyframes example {
            from {
                background-color: red;
            }
            to {
                background-color: yellow;
            }
        }
        /* 向此元素应用动画效果 */
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            //动画名称
            animation-name: example;
            //动画持续四秒
            animation-duration: 4s;
        }
    </style>

如上图：将 “example” 动画绑定到 < div > 元素。动画将持续 4 秒钟，同时将 < div > 元素的背景颜色从 “red” 逐渐改为 “yellow”。 

注意：animation-duration属性定义需要多长时间才能完成动画，若未指定这个属性，则动画不会发生，因为默认值为0（0S）

三：反向或交替运行动画

  animation-direction 属性指定是向前播放、向后播放还是交替播放动画。
animation-direction 属性可接受以下值：
1，normal - 动画正常播放（向前）。默认值
2，reverse - 动画以反方向播放（向后）
3，alternate - 动画先向前播放，然后向后
4，alternate-reverse - 动画先向后播放，然后向前

四：指定动画的速度曲线

animation-timing-function 属性规定动画的速度曲线。
animation-timing-function 属性可接受以下值：
ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
linear - 规定从开始到结束的速度相同的动画
ease-in - 规定慢速开始的动画
ease-out - 规定慢速结束的动画
ease-in-out - 指定开始和结束较慢的动画
cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

五、设置动画应运行多少次animation-iteration-count

animation-iteration-count 属性指定动画应运行的次数。

六、延迟动画

animation-delay 属性规定动画开始的延迟时间。

七：总结

css动画属性

@keyframes-规定动画的模式

animation-设置所有动画的简写属性

animation-delay：规定动画开始的延迟

animation-direction：决定动画是向前，向后还是交替播放

animation-duration：动画完成一个周期应花费的时间

animation-fill-mode：不播放动画时的样式

animation-iteration-count：动画播放的次数

animation-name：@keyframes动画的名称

animation-play-state：决定动画是运行还是暂停

animation-timing-function：动画的速度曲线