本文主要包含transition css3,css3动画transition,css3中transition,transition animation,transition等相关知识,佚名 希望在学习及工作中可以帮助到您
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
</div> </div>
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
</div> </div>