CSS3 transition属性_html/css_WEB-ITnose
程序员文章站
2022-04-05 20:25:10
...
- 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之后高度开始过渡
1 2
无标题文档 3 7 8 9 10 - 过渡结束时触发指定的执行函数,在过渡结束时,执行alert(“end”)
无标题文档 - 过渡完成事件
- Webkit内核: obj.addEventListener('webkitTransitionEnd', function(){}, false);
- firefox内核:obj.addEventListener('transitionend', function(){}, false);
上一篇: zend studio 复制粘贴卡的要命,该怎么处理
下一篇: CSS入门常见的问题