弄清 CSS3 的 transition 和 animation弄清 CSS3 的 transition 和 animation

transition 属性是

transition-property,

transition-duration,

transition-timing-function,

transition-delay

的简称,用于设定一个元素的两个状态,不同的状态可以用伪类，比如:hover, :active 或者是通过 javascript 动态设定。IE10+支持。

所以 transition 的初始值为：

并且有事件可以监测 transition 结束

HTML

CSS

animation 属性是如下这些属性的简写

animation-name: none

animation-duration: 0s

animation-timing-function: ease

animation-delay: 0s

animation-iteration-count: 1

animation-direction: normal

animation-fill-mode: none