animation动画

（1）定义场景

@keyframes 场景名称 {
from{样式名:值;……}
to{样式名:值;……}
}
说明
from 设置动画开始之前的样式。
to 设置动画结束之后的样式。

或

@keyframes 场景名称 {
0%{样式名:值;……}
50%{样式名:值;……}
100%{样式名:值;……}
}
说明
0% 设置动画开始之前的样式。
50% 设置动画进行一半时的样式。
100% 设置动画结束后的样式。

（2）定义动画

animation: 场景名称 播放时长 速度曲线 延迟时间 播放次数 是否轮流反向播放
animation-name 场景名称
animation-duration 播放时长
animation-timing-function 速度曲线
animation-delay 延迟时间
animation-iteration-count 播放次数（n或infinite）
animation-direction 是否轮流反向播放（normal默认&alternate轮流反向播放）