CSS3transition属性_html/css
来源：动视网
责编：小采
时间：2020-11-27 16:13:01
CSS3transition属性_html/css
CSS3transition属性_html/css_WEB-ITnose: Transition（过渡），设置过渡时间，（transition-duration） 无标题文档 .box{width:100px;height:100px;background:red; transition:500ms;} .box:hover{ background:blue;width:200px;height:200p
导读CSS3transition属性_html/css_WEB-ITnose: Transition（过渡），设置过渡时间，（transition-duration） 无标题文档 .box{width:100px;height:100px;background:red; transition:500ms;} .box:hover{ background:blue;width:200px;height:200p
- Transition（过渡），设置过渡时间，（transition-duration）
- 只设置某一个样式过渡，即要运动的样式，下面的例子设置了width过渡（all | width | height | ... | none):
- 设置运动形式：transition-timing-function (ease[默认值，逐渐变慢], linea[匀速], ease-in[加速], ease-out[减速], ease-in-out[先加速后减速], cubic-besizer[贝塞尔曲线]（http://matthewlein.com/ceaser/）)
- 同时设置多个样式的过渡时间，用逗号分隔开，如下
- 设置延迟时间，transition-delay，即多长时间后开始某个运动，下面的例子中在1s之后高度开始过渡
- 过渡结束时触发指定的执行函数，在过渡结束时，执行alert（“end”）
- 过渡完成事件
- Webkit内核： obj.addEventListener('webkitTransitionEnd', function(){}, false);
- firefox内核：obj.addEventListener('transitionend', function(){}, false);
CSS3transition属性_html/css
CSS3transition属性_html/css_WEB-ITnose: Transition（过渡），设置过渡时间，（transition-duration） 无标题文档 .box{width:100px;height:100px;background:red; transition:500ms;} .box:hover{ background:blue;width:200px;height:200p
