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 多个值
- 长度一致
div {
transition-property: opacity, left, top, height;
transition-duration: 3s, 5s, 3s, 4s;
}
- 长度不一致 以
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时
- 比如移除css的
transition-property属性，事件将不会被触发. - 如在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
