CSS中animation属性大家都很常见，而@keyframes大家有听说过吗？animation属性里引用@keyframes有一种简写方式，展开来一共有8个子属性，通过它们，我们可以控制各种的动画过程。

子属性

• animation-name: 指定一个 @keyframes 的名称，动画将要使用这个@keyframes定义。

• animation-duration: 整个动画需要的时长。

• animation-timing-function: 动画进行中的时速控制，比如 ease或 linear

• animation-timing-delay: 动画延迟时间

• animation-direction: 动画重复执行时运动的方向

• animation-iteration-count: 动画循环执行次数

• animation-fill-mode: 设置动画执行完成后/开始执行前的状态，比如，你可以让动画执行完成后停留在最后一幕，或恢复到初始状态。

• animation-play-state: 暂停/启动动画。

接下来给大家展示下：

HTML:

<div class="element"></div>

CSS:

显示效果：

大家可以尝试自己做下，非常炫酷哦！了解以上的属性，再也不用担心动画效果了。

切版 qieban(.cn)

例

使用简写属性把 animation 绑定到一个<div> 元素：

div{animation:mymove5sinfinite; -webkit-animation:mymove5sinfinite; /* Safari 和 Chrome */}

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

语法

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

如您还有不明白的可以在下面与我留言或是与我探讨QQ群{{308855039:0}}，我们一起飞！