CSS3 animation 属性

浏览器支持

Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。

Safari 和 Chrome 支持替代的 -webkit-animation 属性。

Internet Explorer 9 以及更早的版本不支持 animation 属性。

定义和用法

语法：

animation: name duration timing-function delay iteration-count direction;

animation 属性是一个简写属性，用于设置六个动画属性：

值

描述

animation-name

规定需要绑定到选择器的 keyframe 名称。。

animation-duration

规定完成动画所花费的时间，以秒或毫秒计。

animation-timing-function

规定动画的速度曲线。

animation-delay

规定在动画开始之前的延迟。

animation-iteration-count

规定动画应该播放的次数。

animation-direction

规定是否应该轮流反向播放动画。

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

实践

1、动画只能在页面初次渲染的时候显示，如何控制动画的展示时间呢？

答案很简单，动态添加animation-name，这样页面会识别动画是刚刚添加的。

2、如何让动画一直循环播放？

答案很简单，animation-iteration-count设置为infinite。

3、animation和transition的区别

与transition不同的是，animation可以通过keyframes显式控制当前帧的属性值，

而transition只能隐式来进行（不能指定每帧的属性值），所以相对而言animation的功能更加灵活。