1 2 3 4 5 div 6 { 7 width:100px; 8 height:100px; 9 background:yellow;10 transition:width 2s;11 -moz-transition:width 2s; /* firefox 4 */12 -webkit-transition:width 2s; /* safari and chrome */13 -o-transition:width 2s; /* opera */14 }15 16 div:hover17 {18 width:300px;19 }20 21 22 23 24
25 26 请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。
27 28 注释：本例在 internet explorer 中无效。
29 30 31
view code
1 2 3 4 5 div 6 { 7 width:100px; 8 height:100px; 9 background:yellow;10 transition:width 2s, height 2s;11 -moz-transition:width 2s, height 2s, -moz-transform 2s; /* firefox 4 */12 -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* safari and chrome */13 -o-transition:width 2s, height 2s, -o-transform 2s; /* opera */14 }15 16 div:hover17 {18 width:200px;19 height:200px;20 transform:rotate(180deg);21 -moz-transform:rotate(180deg); /* firefox 4 */22 -webkit-transform:rotate(180deg); /* safari and chrome */23 -o-transform:rotate(180deg); /* opera */24 }25 26 27 28 29 请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。
30 31 注释：本例在 internet explorer 中无效。
32 33 34
view code
transition-timing-function