动画 @keyframs

动画 @keyframs

动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画。

定义:

@keyframes 动画名称{
    from{}
    to{}
}

@keyframes 动画名称{
    0%{}
    100%{}
}

调用:

div{animation: name duration}

动画属性 animation

animition:动画名词 动画时间 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
animation: name duration timing-function delay iteration-count direction fill-mode;

多组动画之间用逗号隔开

animition:name1 duration,name2 duration;

1. 动画名字参照css类选择器命名

2. 动画时长和延迟时间别忘了带单位 s

3. infinate 无限循环动画

4. alternate 为反向 就是左右来回执行动画（跑马灯）

5. forwards 动画结束停留在最后一帧状态

6. linear 让动画匀速执行

鼠标经过暂停动画 animation-play-state: paused;

.box:hover ul {
    animation-play-state: paused;
}