CSS3 Transition css屬性值在一定時間內平滑地過渡； transition主要包含四個屬性值： transition-property 執行變換的屬性；應用所有屬性用all； transition-duration 動畫持續的時間；註意要加單位s或者ms transition-tim ...
CSS3 Transition
css屬性值在一定時間內平滑地過渡；
transition主要包含四個屬性值：
transition-property
執行變換的屬性；應用所有屬性用all；
transition-duration
動畫持續的時間；註意要加單位s或者ms
transition-timing-function
在延續時間段，變換的速率變化；包括：
ease：預設項，動畫效果慢慢開始然後加速，到中點後再減速最後緩慢到達終點
ease-in-out：與ease類似，加減速更柔和一些
ease-in：開始比較慢，但是加速和停止曲線比較陡峭
ease-out：開始較快，然後緩慢停止
linear：線性平均速率，通常在color和opacity屬性的變化上
cubic-bezier函數：自定義速度模式 可以使用工具：http://cubic-bezier.com/#.17,.67,.83,.67
transition-delay
變換延遲時間；delay的真正意義在於，它指定了動畫發生的順序，使得多個不同的transition可以連在一起，形成複雜效果。
transition需要事件觸發，所以沒法在網頁載入時自動發生。
例：
簡寫：
img{
transition: 1s 1s height ease;
-webkit-transition: 1s 1s height ease;
}
單獨寫：
img{
transition-property: height;
transition-duration: 1s;
transition-delay: 1s;
transition-timing-function: ease;
}
transition的高級寫法：
p#animate {
width: 10em;
background-color: #F00;
border-radius: 5px;
transition-property: width, border-radius, background-color;
transition-duration: 1s, 2s;
transition-timing-function: ease, ease-out, linear;
}
p#animate:hover {
width: 20em;
background-color: #00F;
border-radius: 50%;
}
註意其中的transition-duration只寫了兩個，那麼第三個transition-property屬性background-color就用迴圈到第一個，也就是說他的transition-duration值是1s；
註意要寫transition的相容寫法:
p {
-webkit-transition: all .5s ease-in-out 1s;
-o-transition: all .5s ease-in-out 1s;
-moz-transition: all .5s ease-in-out 1s;
transition: all .5s ease-in-out 1s;
}
用CSS3 Transition製作的效果: http://leaverou.github.io/animatable/
參考資料：
http://www.zhangxinxu.com/wordpress/2010/11/css3-transitions-transforms-animation-introduction/
http://www.w3cplus.com/content/css3-transform
http://beiyuu.com/css3-animation/
http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
