css3動畫

　　在CSS3中可以透過animation創造複雜的動畫序列，像transition屬性一樣用來控制CSS的屬性實現動畫效果。

@
1. keyframes開頭，後面緊跟著動畫的名稱(animation-name)，再加上一對花括號"{...}"，括號中是多個不同時間段的樣式規則。 「to」代表一個動畫的開始與結束，「from」相當於0%，"to"相當於100%。從0%開始到100%時結束，從中還經歷了一個40%和60%兩個過程，上面代碼具體意思是：「yxz」動畫在0%時元素定位到left為100px的位置背景色為green ，然後40%時元素過渡到left為150px的位置並且背景色為orange，60%時元素過渡到left為75px的位置,背景色為blue，最後100%結束動畫的位置元素又回到起點left為100px處,背景色變成red。

   ##　　在

   @
keyframes中的關鍵幀並不是一定要按照順序來指定，其實可以任何順序來指定關鍵幀，因為動畫中的關鍵幀順序由百分比值確定而不是聲明的順序。
2. 　　這兩個動畫，因為他們並沒有附加到任何元素上，是沒有效果的。透過宣告

   @

   keyframes動畫後，要讓動畫生效，需要透過CSS屬性來呼叫
@

　　使用動畫屬性animation呼叫@
keyframes宣告的動畫。 動畫屬性animation，是一個複合屬性，它包含了八個子屬性。其語法如下：

@keyframes yxz { 0% { margin-left: 100px; background: green; } 40% { margin-left: 150px; background: orange; } 60% { margin-left: 75px; background: blue; } 100% { margin-left: 100px; background: red; } }

@keyframes宣告的名稱一樣。 css載入動畫時會套用對應的名字來執行。

@keyframes yxz{ 0%,40%{ width:200px; height:200px; } 20%,60%,80%{ width:100px; height:100px; } 100%{ width:0; height:0; } }

@keyframes創建的動畫名稱。

animation-duration

animation:[ ||  ||  ||  ||  ||  ||  || ] *

：主要用來設定動畫延遲時間。

animation-name:none | IDENT [,none | IDENT] *

時為延遲時間，負整數時會截斷播放時間(把animation-duration所用的時間截斷一部分，就是說跳過這部分值，直接進行後面的動畫)　　

animation-iteration-count：主要用來設定動畫播放的次數。

animation-duration: [,] *

animation-direction：主要用來設定動畫播放的方向。

animation-duration: [,] *

都是向前播放。 alternate，動畫向前播放一次，向後播放一次。

：主要用來控制動畫播放的狀態。

animation-iteration-count: infinite |  [,infinite | ] *

animation-fill-mode：主要用来设置动画时间之外的属性，也就是动画开始前或者结束后的属性。

animation-fill-mode:none | forwards | backwards | both

　　默认值为none，表示动画按期执行与结束，在动画结束时，会反回初始状态。forwards，当动画结束时，停留在最后最后一帧(保持最后的状态)。backwards，当动画开始时迅速应用第一帧。both，同时拥有forwards与backwards的作用。

学以致用，学习完动画的基础知识后，就需要练习一下，把学的东西用出来。可以把代码复制在浏览器中观看效果。

nbsp;html>    
 
 

• 第一张
• 第二张
• 第三张
• 第四张
• 第五张

CSS3动画完。

以上是關於CSS實現動畫詳解及實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！