当前位置:Gxlcms > html代码 > CSS3transition属性_html/css_WEB-ITnose

CSS3transition属性_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:26人阅读

  1. Transition(过渡),设置过渡时间,(transition-duration)

        无标题文档        

  2. 只设置某一个样式过渡,即要运动的样式,下面的例子设置了width过渡(all | width | height | ... | none):

        无标题文档        

  3. 设置运动形式:transition-timing-function (ease[默认值,逐渐变慢], linea[匀速], ease-in[加速], ease-out[减速], ease-in-out[先加速后减速], cubic-besizer[贝塞尔曲线](http://matthewlein.com/ceaser/))

        无标题文档        

  4. 同时设置多个样式的过渡时间,用逗号分隔开,如下

        无标题文档        

  5. 设置延迟时间,transition-delay,即多长时间后开始某个运动,下面的例子中在1s之后高度开始过渡

     1  2     无标题文档 3      7  8  9     
    10

  6. 过渡结束时触发指定的执行函数,在过渡结束时,执行alert(“end”)

        无标题文档        

  7. 过渡完成事件
  8. Webkit内核: obj.addEventListener('webkitTransitionEnd', function(){}, false);
  9. firefox内核:obj.addEventListener('transitionend', function(){}, false);

人气教程排行