css行内样式animation_css动画创建及使用

CSS动画就是一种样式逐渐改变成另一种样式的过程。CSS创建动画需要用到@keyframes属性，@keyframes用于规定动画规则。

@keyframes需要配合动画属性使用。

CSS中的动画属性有：

animation：所有动画属性的简写属性。

语法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation-name：配合 @keyframes 使用，规定 @keyframes 动画的名称。

animation-duration：规定动画完成一个周期所花费的秒s或毫秒ms。默认是 0。

animation-timing-function：规定动画的速度曲线。默认是 "ease"。

值支持：

linear：动画以均速进行；

ease：动画以低速开始，然后加快，结束前变慢；

ease-in：动画以低速开始；

ease-in-out：动画以低速开始和结束；

cubic-bezier(n,n,n,n)：n取0到1的值。

animation-delay：规定动画页面加载后多少秒s或毫秒ms开始。默认是 0。

animation-iteration-count：规定动画被播放的次数。默认是 1。

值支持：

n：n为需要播放的次数；

infinite：无限次。

animation-direction：规定动画是否在下一周期逆向地播放。默认是 "normal"。

值支持：

normal：默认值，动画正常播放；

reverse：动画反向播放&#