animation

1.animation和transition
相同点：随着时间改变元素的值
不同点：transition需要事件触发才会改变其的css属性；而animation不需要触发事件。

2.动画帧：

animation: comby 1s linear 1s infinite;

分别对应：动画的id ，执行的时间，执行的速度，延迟的时间，执行的次数，infinite为无限次执行

设置两种动画设置：
第一种：

@keyframes bee{   /*后面随便设置的id  */
            /* 初始状态 */
            from{
                width: 200px;
                background: red;
            }
            /* 最终状态 */
            to{
                width:400px;
                background: blue;
            }
        }

第二种：

@keyframes comby{
            /* 可以设置多种状态 */
            0%{
                width: 200px;
                height: 200px;
                background: red;
            }
            25%{
                width: 250px;
                height: 250px;
                background: blue;
            }
            50%{
                width: 300px;
                height: 300px;
                background: purple;
            }
            75%{
                width: 350px;
                height: 350px;
                background: green;
            }
            100%{
                width: 400px;
                height: 400px;
                background: yellow;
            }
        }

3.animation动画的单一属性
animation-name 检索动画名称
animation-duration 检索动画的持续时间
animation-timing-function 检索过度类型
可以设置值为：linear正常；ease平滑过渡；ease-in由慢到快；ease-out：由快到慢

animation-delay 检索动画的延迟时间
animation-iteration-count检索动画的循环次数 infinite/number
animation-direction检索动画在循环中是否反向运动
normal正常方向；reverse反方向运行；alternate 先正常运动再反方向，并且一直交替持续；alternate-reverse先反向再正常，交替持续
animation-play-state动画继续还是暂停 running/pause