1.@keyframes

• @keyframes 规则是创建动画。
• @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

2.写法

@keyframes my
{
    from {background: red;}
    to {background: yellow;}
}

div{
     animation: my 5s;/*动画名称 动画时长*/
   }

    animation-name: 规定 @keyframes 动画的名称
    animation-duration: 规定动画完成一个周期所花费的秒或毫秒,默认是 0
    animation-timing-function:  规定动画的速度曲线，默认是 "ease"
    animation-delay: 规定动画何时开始，默认是 0
    animation-iteration-count: 规定动画被播放的次数，默认是 1
    animation-direction: 规定动画是否在下一周期逆向地播放，默认是 "normal"。
    animation-play-state:   规定动画是否正在运行或暂停，默认是 "running"。