transition：過度屬性
transition-property 規定設定過度效果的css屬性的名稱，預設可以寫all
transition-duration 規定完成過度效果需要多少秒或毫秒
transition-timing-function: 預設easetransition-delay ：延時時間
ease:逐漸變慢
linear:勻速
ease-in:加速
ease-out:減速
ease-in-out:先加速在滑輪
-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);
} 2注意重複觸發transitionend事件。例如下面重複改變div的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：變形
旋轉：rotate()：度數
斜切：skew()：度數
skewX
。 ：正數、負數、小數scaleXscaleY位移：translate()：css支援的單位都可以translateXtranslateY 的先寫完後寫『 (2) rotate(50deg); 先執行旋轉，在執行縮放 以上transform的值，也會根據中心點（transform-origin）來改變
