#transition-property 規定設定過度效果的css屬性的名稱,預設可以寫all
transition-duration 規定完成過度效果需要多少秒或毫秒
transition-timing-function: 預設easetransition-delay:延時時間
ease:逐漸變慢
linear:勻速
ease-in:加速
ease-out:減速
ease-in-out:先加速在減速
cubic-bezier:貝塞爾曲線
transitionend:過度完成
事件function addEnd(obj,fn){ obj.addEventListener('WebkitTransitionEnd',fn,false); obj.addEventListener('transitionend',fn,false); } function removeEnd(obj,fn){ obj.removeEventListener('WebkitTransitionEnd',fn,false); obj.removeEventListener('transitionend',fn,false); }
注:1在transition里,如果写了多个,那没改变一次样式,就会触发一次事件 2注意重复触发transitionend事件。比如下面重复改变p的y轴位置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #nav{position: absolute;left:0;top:0;width: 100px;height: 100px;background: gray;transition: 1s all;} </style> </head> <body> <div id="nav"></div> <script> var oHome=document.getElementById("nav"); var count = 10; oHome.onclick = function(){ count += 20; oHome.style.transform = 'translate(0,'+ count +'px)' addEnd(this,function(){ count += 20; oHome.style.transform = 'translate(0,'+ count +'px)' }) } function addEnd(obj,fn) { obj.addEventListener('WebkitTransitionEnd',fn,false); obj.addEventListener('transitionend',fn,false); } </script> </body> </html>
transform:變形
#斜切:skew():度數
#scaleX
以上是css變形transform屬性詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!