animation

这是 CSS3 中的动画属性，十分的有用！

animation 属性是设置普通动画属性的缩写属性：

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

它采用一个或多个逗号分隔的值，其中每个值使用长边动画属性调用和控制 @keyframes 动画。 @keyframes 规则定义实际的动画序列，并由动画属性控制。

我们来看看 animation 的缩写形式是什么样的吧：

animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-fill-mode];

它真的很长，我们也看到了，所以在前期我们学习的时候可以时不时看下它的缩写，再经过一定的练习后，我们就可以掌握咯。但是，因为它们是按照空格的方式，因此其实顺序不是那么的重要。

animation 属性是空格分隔的，它们的顺序无关紧要，除了当使用 animation-duration 和 animation-delay 时，它们需要按顺序。因此，如果在定义中指定两个值，第一个将被视为动画持续时间，第二个将被视为动画延迟。

你如果未显式设置的任何值，都会将其设置为其默认值。这就是为什么你必须指定一个动画名称，否则不会应用动画。如果不应用动画持续时间，它将默认为 “0s”，动画效果立即发生，因此关键帧无效。

我们这里举两个例子，让我们看看它的写法：

animation: bounce .3s ease-in-out 1s infinite;
animation: rotate-out 1s steps(3, end);

不懂没有关系，我们会一个属性一个属性的讲。

我们还可以分开书写，不过十分不建议。

animation-name: bounce;
animation-duration: .3s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-iteration-count: infinite;

就现在的现代浏览器而言，只要有前缀，基本都可以兼容。但是 IE9 及以下版本无法支持这个属性。

接下来我们就来一个一个攻破它们吧~
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state