css3 transition

1.transition

1.1 写法

/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

img{
    transition-property: height;
    transition-duration: 1s;
    transition-delay: 1s; //延时
    transition-timing-function: ease;
}

1.2 transition-timing-function

（0）ease:  逐渐变慢==贝塞尔曲线(0.25, 0.1, 0.25, 1.0).(默认)
（1）linear：匀速==(0.0, 0.0, 1.0, 1.0).
（2）ease-in：加速==(0.42, 0, 1.0, 1.0)
（3）ease-out：减速==(0, 0, 0.58, 1.0)
（4）ease-in-out:  加速然后减速==(0.42, 0, 0.58, 1.0)
（5）cubic-bezier函数：自定义速度模式

贝塞尔曲线：http://cubic-bezier.com

1.3 多个值

1. 长度一致

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 4s;
}

2. 长度不一致 以transition-property为准
   2.1 属性值列表短于它 则重复值以达长度一致

div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}
//等同于
div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}

2.2 属性值列表长于它 则截取

div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}
//等同于
div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}

  1.4 transitionend

事件会在CSS transition结束后触发. 当transition完成前移除transition时

1. 比如移除css的transition-property属性，事件将不会被触发.
2. 如在transition完成前设置 display为none，事件同样不会被触发。

//写法
var element = document.getElementById("t-three");
element.addEventListener("transitionend", showMessage, false);
var i = 0;
function showMessage(e) {
    console.log(e);//详细属性 见打印
    element.innerHTML = 'Transition 已完成'+i;
    i++;
}

demo: http://sunxinqiang.top/css3/transition/transition.html

参考：

1. http://www.css88.com/archives/4705

2. http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

3. https://developer.mozilla.org