標籤：
Y(^o^)Y
css動畫大亂彈之animation。
概述
什麼是animation呢？在回答這個問題之前，先要說明什麼叫做@keyframe（主要畫面格）。@keyframe算是一個動畫模板。在其中，可以使用百分比，如從0%到100%的任意值，分別在每個百分比中，加上不同的屬性，從而讓元素達到一種在不斷變化的動畫效果。這和我們製作flash動畫一樣，我們只需設計幾個主要畫面格，系統就能產生動畫啦！
一個@keyframe例子：
1 /*定義主要畫面格動畫*/ 2 @keyframes myframe { 3 0%{ 4 width: 100px; 5 height: 100px; 6 border-radius: 50%; 7 } 8 50%{ 9 width: 200px;10 height: 200px;11 border-radius: 50%;12 }13 100%{14 width: 100px;15 height: 100px;16 border-radius: 50%;17 }18 }
分別定義了動畫0%（開始時），50%（播放一半時），100%（播放結束時）的效果，瀏覽器就能直接產生動畫了。
ok，回到上面的問題：什麼是animation？animation就是利用主要畫面格來設定動畫的一個工具。可以這麼想，主要畫面格就是一個“動畫模型”，animation就是“播放器模型”。
animation的常用屬性
1.animation-name: @keyframe動畫的名稱。
2.animation-duration: 動畫完成一個周期需要的時間，預設是0。
3.animation-timing-function:動畫的速度趨勢（緩動效果），預設是ease。
4.animation-delay: 動畫開始的延遲時間，預設是0。
5.animation-iteration-count: 動畫播放的次數，預設是1。可以使用數字，也可以使用“infinite”，表示無限次迴圈播放。
6.animation-direction: 動畫下一次播放的順序，可以順序或逆序，預設是"normal"。
7.animation-play-state: 動畫是否正在運行或暫停，預設是"running"。
8.animation-fill-mode: 對象動畫時間之外的狀態。
animation與transition的區別
animation是針對@keyframe而言的，它只是在事件發生時觸發動畫，但是並不改變原來的屬性，當事件完成，又恢複原樣。transition強調是過渡動畫，它是確確實實改變了屬性。
執行個體
在瀏覽器中央有一個紅色的正方形，滑鼠放上去，變為圓形。滑鼠移除，變為正方形。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>animation</title> 6 </head> 7 <style type="text/css"> 8 .box{ 9 width: 100px;10 height: 100px;11 margin: 50px auto; /*水平置中*/12 background-color: #f00; /*設定紅色*/13 }14 .box:hover{15 animation-name:myframe; /*要使用的主要畫面格動畫的名稱*/16 animation-delay: 100ms; /*滑鼠放上後延遲100ms發生動畫*/17 animation-duration: 1s; /*動畫持續一秒*/18 animation-timing-function:ease-in; /*加速播放*/19 animation-iteration-count: infinite; /*迴圈播放*/20 }21 /*定義主要畫面格動畫*/22 @keyframes myframe {23 0%{24 width: 100px;25 height: 100px;26 border-radius: 50%;27 }28 50%{29 width: 200px;30 height: 200px;31 border-radius: 50%;32 }33 100%{34 width: 100px;35 height: 100px;36 border-radius: 50%;37 }38 }39 40 </style>41 <body>42 <div class="box"></div>43 </body>44 </html>
CSS動畫效果之animation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
