欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS3 transition属性_html/css_WEB-ITnose

程序员文章站 2022-04-05 20:25:10
...
  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);