css3 transition简单使用
?
/* (-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,即立即执行过渡)