css3过渡transition笔记-QUI-Notes

transition属性值:

1.transition-property——规定应用过渡的 CSS 属性的名称。
2.transition-duration——定义过渡效果花费的时间。默认是 0。
3.transition-timing-function——规定过渡效果的时间曲线。默认是 "ease"。
4.transition-delay——规定过渡效果何时开始。默认是 0。

transition触发方式:

1.伪类触发——hover|active|focus
2.媒体查询触发——@media
3.js触发——click|hover等

transition兼容写法:

div{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}

注意,多个过渡用英文,分割

div{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}