好程式員web前端系列之動畫，css3屬性中有關於製作動畫的三個屬性：
transform,transition,animation
@keyframes mymoveto}
或@keyframes mymove
100%
}（中間再可以新增關鍵幀）
相同點：都是隨著時間改變元素的屬性值。不同點：transition需要觸發乙個事件(hover事件或click事件等)才會隨時間改變其css屬性； 而animation在不需要觸發任何事件的情況下也可以顯式的隨著時間變化來改變元素css的屬性值，從而達到一種動畫的效果，css3的animation就需要明確的動畫屬性值。
animation復合屬性。檢索或設定物件所應用的動畫特效。
1.animation-name 檢索或設定物件所應用的動畫名稱
說明：必須與規則@keyframes配合使用，eg:@keyframes mymove{} animation-name:mymove
2.animation-duration 檢索或設定物件動畫的持續時間
說明：animation-duration:3s; 動畫完成使用的時間為3s
3.animation-timing-function 檢索或設定物件動畫的過渡型別
說明：linear：線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
ease：平滑過渡。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)
4.animation-delay 檢索或設定物件動畫延遲的時間
說明：animation-delay:0.5s; 動畫開始前延遲的時間為0.5s)
5.animation-iteration-count 檢索或設定物件動畫的迴圈次數
說明：animation-iteration-count: infinite | number;
infinite：無限迴圈
number: 迴圈的次數
6.animation-direction 檢索或設定物件動畫在迴圈中是否反向運動
說明：normal：正常方向
reverse：反方向執行
alternate：動畫先正常執行再反方向執行，並持續交替執行
alternate-reverse：動畫先反執行再正方向執行，並持續交替執行
7.animation-play-state 檢索或設定物件動畫的狀態
說明：animation-play-state:running | paused;
running:運動
paused: 暫停
animation-play-state:paused; 當滑鼠經過時動畫停止，滑鼠移開動畫繼續執行
例項
好程式設計師web前端開發測驗之css部分
好程式設計師web前端開發測驗之css部分front end web development quiz css 部分問題與解答 q css 屬性是否區分大小寫?ul a 不區分。html，css都對大小寫不敏感，但為了更好的可讀性和團隊協作一般都小寫，而在xhtml 中元素名稱和屬性是必須小寫的。q...
好程式設計師web前端開發測驗之css部分
好程式設計師web前端開發測驗之css部分front end web development quiz css 部分問題與解答 q css 屬性是否區分大小寫?1.ul 2.margin 10px 3.a 不區分。html，css都對大小寫不敏感，但為了更好的可讀性和團隊協作一般都小寫，而在xhtm...
好程式設計師web前端分享CSS學習 HSLA顏色模式
好程式設計師web前端分享css學習 hsla顏色模式 一 理論 1.hsla顏色模式 a.hsla在hsl基礎上增加了不透明度，值越大透明度越低 b.hsla顏色模式的瀏覽器相容性和hsl一樣，只有較新版本的主流瀏覽器才支援 2.rgba和hsla顏色模式二者可以完全相互替換 3.rgba hsl...