CSS3的transition和animation的用法实例介绍

transition

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

所以 transition 的初始值为：

transition-delay: 0s;
transition-duration: 0s;
transition-property: all;
transition-timing-function: ease;

用法

div {
transition: <property> <duration> <timing-function> <delay>;
}

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

el.addEventListener("transitionend",updateTransition,true);

//in webkit
el.addEventListener("webkitTransitionEnd",updateTransition,true);

实例

HTML