先介紹css3動畫如何使用？兩步即可搞定。
定義動畫規則
@keyframe animationname
}複製**
說明： 元素應用動畫
elemselector
複製**
說明： 屬性名稱
含義animation-name
@keyframe動畫的名稱
animation-duration
動畫的時長，需指定單位如s或ms，預設值為0
animation-timing-function
動畫的速度曲線，預設值為ease，其他取值有ease-in、ease-out、ease-in-out、linear、step-start、step-end、貝塞爾曲線函式cubic-bezier、步進函式steps
animation-delay
動畫延時多久開始，需指定指定單位如s或ms，預設為0，，取正值表示延時，負值表示超前
animation-iteration-count
animation-direction
animation-play-state
animation-fill-mode
動畫執行前、後是否應用目標狀態，預設是none，其他取值有forwards、backwards、both
重點來了，乙個倒計時效果是如何實現的，先看效果。由於是壓縮生成的gif，所以看起來會很快。
下面對主要**進行說明，
這裡有乙個地方需要特別注意，避免以後踩坑。
關於動畫樣式的解綁與繫結。
動畫樣式animation一執行結束，就不再起作用了，要使其重新生效，需要重新繫結。我試了4種方式。
複製**
JS實現倒計時效果
效果 倒計時效果 title div style head h 1 div m 2 div s 3 div 獲取時分秒 var hour document.queryselector h var minute document.queryselector m var second document....
css3 旋轉倒計時
很多答題的h5介面上有旋轉倒計時的效果，乙個不斷旋轉減少的動畫，類似於下圖的這樣。今天研究了下，可以通過border旋轉得到。一般我們可以通過border得到乙個四段圓。see the pen circle by stoneniqiu stoneniqiu on codepen.接下來接可以通過旋轉...
css3動畫效果和3D模型
今天了解了css3的動畫漸變效果，如果我們要對頁面中的某個元素的樣式進行變化，就不用js或jquery苦苦的寫 了，直接用css3的這個transition這個屬性就ok，方便快捷，下面請看demo。我要對某個div操作，例如 當滑鼠移入div中，改變其width height和background...