animation-duration

animation-duration 属性用于指定动画周期需要多长时间。

注意这里和我们前面看到的 animation-iteration-count 的区别哦。这里指的是动画执行一次多长时间；而 animation-iteration-count 指的是整个动画周期重复执行多少次。

它的时间以秒或毫秒指定，并且初始设置为“0s”，这意味着动画立即发生。即，如果我们没有定义它，则在渲染完后立即执行。

我们这样打个比方：如果我们再跑 50 米的时候，我跑 5s，你跑 10s，也就是持续时间你比我长。在别人眼中看起来，你的动作比较缓慢一些。假如跑 50 米，我跑了 0s，什么概念？一眨眼就完成了！也就是在你载入网页的时候或刚执行的时候就已经完成了。

它是可以使用逗号隔开的，比如你想这个元素先后执行两个动画，那么可以向以下这样定义它：

.element {
   animation-name: rotate, fall;
   animation-duration: .6s, .9s;
   animation-timing-function: ease-in-out, ease-out;
}
@keyframes rotate {
   /* ... */
}
@keyframes fall {
   /* ... */
}

简单来说，你设置的时间越长，它的动作就会越缓慢；反之，就会越快。

好理解吧？我们继续下一个。

下一节：animation-timing-function