动画animation

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
例：animation: myanimation 2s linear 1s infinite forwards;

animation 属性是一个简写属性，用于设置动画属性：
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state

animation-name 动画名称

animation-duration 动画指定需要多少秒或毫秒完成
值：time 默认值为 0，意味着没有动画效果

animation-timing-function 设置动画如何完成一个周期
值：linear 匀速
ease 先慢后快，结束前变慢 默认
ease-in 低速开始
ease-out 低速结束
ease-in-out 低速开始和结束
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值

animation-delay 动画在启动前的延迟间隔
值：time 默认值为 0

animation-iteration-count 动画的播放次数
值：n 一个数字，定义播放多少次动画 默认值1
infinite 动画无限次播放

animation-direction 是否轮流反向播放动画
值：normal 正常
reverse 反向播放
alternate 在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放
alternate-reverse 在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放

animation-fill-mode 当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要处于什么状态
值：none 默认，播放完动画后，画面停在起始位置
forwards 播放完动画，停在animation定义的最后一帧(保持最后一个属性值)
backwards 如果设置了animation-delay，在开始到delay这段时间，画面停在第一帧。如果没有设置delay，画面是元素设置的初始值
both 设置动画状态为动画结束或开始的状态（例如设置奇数播放为forwards状态，偶数播放为backwards状态）

animation-play-state 动画是否正在运行或已暂停
值：paused 指定暂停动画
running 指定正在运行的动画，默认

小案例：
盒子平滑的绘制正方形
@keyframes 动画名称{
from / 0%{ }
to / 100%{ }
}