這篇文章主要為大家詳細介紹了CSS3中Animation動畫屬性用法,教大家如何使用animation動畫,有興趣的小夥伴們可以參考一下
要使用animation動畫,先要熟悉一下keyframes,Keyframes的語法規則:命名是由”@keyframes”開頭,後面緊接著是這個“動畫的名稱”加上一對花括號“{}”,括號中就是一些不同時間段樣式規則。不同關鍵影格是透過from(相當於0%)、to(相當於100%)或百分比來表示(為了得到最佳的瀏覽器支持,建議使用百分比),如下定義一個簡單的動畫:
1 2 3 4 5 6 7 8 |
|
@keyframes定義好了,要使其能發揮效果,必須透過animation把它綁定到一個選擇器,否則動畫不會有任何效果。下面列出了animation的屬性:
下面設定上述的所有屬性
1 2 3 4 5 6 7 |
|
上述所有程式碼可以如下簡寫:
1 2 |
|
Internet Explorer 10、Firefox 以及Opera 支援@keyframes 規則和animation 屬性。
Chrome 和 Safari 需要前綴 -webkit-。
注意:Internet Explorer 9,以及更早的版本,不支援 @keyframe 規則或 animation 屬性。
下面給出上面介紹的關於keyframes和animation屬性的完整程式碼範例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
|
上面程式碼示範了一個正方形沿著一個正方形軌跡運動,基數次按正方向運動,偶數次以反方向運動,運動過程中還帶有顏色變化。具體效果,讀者可以自行執行程式碼觀察。
以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!
相關推薦:
#
以上是關於CSS3中Animation動畫屬性的用法解析的詳細內容。更多資訊請關注PHP中文網其他相關文章!