css动画基础属性与语法

animation动画
定义：通过关键帧控制动画的每一步，让元素从一种样式
逐渐变化为另外一种样式，实现复杂的动画。
@keyframes
作用：用于声明动画，指定关键帧。
帧：用于分解动画动作，每个帧代表某个时间点，定义每个帧上的动作
语法：@keyframs name{
from|0%{
    样式
}
percent{
    样式
}
to|100%|{
    样式
}
}
动画属性值：
animation-name：调用动画，规定需要和keyframes的名字一样
animation-duration：s|ms；动画完成一个周期所需要的时间
animation-delay：s|ms； 播放之前的延迟时间
animation-timing-function： ；规定动画的速度变化类型
属性值：ease;ease-in;ease-in-out;linear;cubic-bezier，steps（)；
animation-iteration-count是用来指定元素播放动画的循环次数，
其默认值为“1”；infinite为无限次数循环。
animation-direction  定义是否应该轮流反向播放动画。