?
selector {
transition : [transition property] [duration] [timing-function] [delay]
}
?
?
四个参数说明如下：
-
transition property：指 将要对selector 的哪些属性值（多个用逗号隔开）的改变进行过渡处理，默认为all，即只要selector 的(任何一个)css属性发生变化（比如hover或click导致的background-color变化），则对此变化进行过渡处理(比如background-color 缓变 变色).(none：不对任何属性的变化进行过渡处理)
/* 对div 的 color 属性过渡持续时间为 1s，background-color 属性过渡持续时间为 10s (-moz前缀：注意在firefox下测试) */ <!DOCTYPE html> <html> <head> <style> body{ background : #ddd; } div{ background-color : #000; color : #fff; width : 400px; height : 70px; line-height : 70px; font-weight : bold; text-align : center; margin : 50px auto; /* transition */ -moz-transition:color 1s; -moz-transition:background 10s; } div:hover{ color : #000; background-color : #fff; } </style> </head> <body> <div>transition</div> </body> </html>?
- duration：即 过渡的持续时间，默认为0.（值可为 1s/2s/3s/.....）
-
timing-function：ease(逐渐变慢)/linear(匀速)/ease-in(加速)/ease-out(减速)/ease-in-out(加速然后减速)/cubic-bezier(自定义时间曲线)
?
/* (-moz前缀：注意在firefox下测试) */ <!DOCTYPE html> <html> <head> <style> body{ background : #ddd; } div{ background-color : #000; color : #fff; width : 200px; height : 70px; line-height : 70px; font-weight : bold; text-align : center; position : absolute; top : 0;left : 0; } #ease { -moz-transition:all 4s ease; } #linear { -moz-transition:all 4s linear; } #ease-in { -moz-transition:all 4s ease-in; } #ease-out { -moz-transition:all 4s ease-out; } #ease-in-out { -moz-transition:all 4s ease-in-out; } div.click{ top : 0; left : 0; } div.clicked{ top : 500px; left : 500px; } </style> </head> <body> <div id="ease-in-out">ease-in-out</div> <div id="ease-out">ease-out</div> <div id="ease-in">ease-in</div> <div id="linear">linear</div> <div id="ease">ease</div> </body> <script> var ids = ['ease','linear','ease-in','ease-out','ease-in-out']; for(var idx in ids){ document.getElementById(ids[idx]).onclick = function(e){ this.className = (this.className == 'clicked' ? 'click' : 'clicked'); } } </script> </html>? - delay：延迟 几秒 后，开始过渡(默认 0,即立即执行过渡)
