# CSS 動畫效果 @keyframes animation ###### tags: `CSS` [TOC] --- ## :star:關鍵影格動畫效果 @keyframes & animation * @keyframes 需搭配 animation 服用 * 不可單獨使用數字，一定要加入 % * 如果同樣的百分比，則相同屬性會後蓋前 ==語法格式↓== :::info /* 動畫設定 */ 　　@keyframes 自訂名稱 { 　　　　from { background-color: yellow;} 　　　　to { background-color: red;} 　　} /* 動畫關鍵影格的漸層設定 */ 　　@keyframes 自訂名稱 { 　　　0% { top: 0px;} 　　　25% { top: 150px;} 　　　50% { top: 300px;} 　　　75% {top: 150px;} 　　　100% {top: 0px;} 　　} ::: :::warning :fire: 滑鼠移入後停止 　　　　animation-play-state:paused; ::: #### ==動畫名稱 animation-name：== * 設定動畫名稱，預設值是「none」 * 名稱可以加引號、亦可不加引號 ex:@keyframes oxxo { ... } 　 @keyframes "oxxo" { ... } * 如果同名，以後面的名稱為主 * 名稱大小寫有區別 * 特殊字元不能使用，但是用引號框起來就可以 #### ==動畫持續時間 animation-duration：== * 動畫單次播放的時間，預設 0 ，單位為 s 或 ms * 和 animation-name都是屬於一定要有的屬性 #### ==動畫加速度函式(屬性) animation-timing-function：== * 動畫轉換速度，預設為「ease」 ![](https://i.imgur.com/Cly9ewh.png) * 較少用的語法: * step-start (看不到第一格) * step-end (看不到最後一格) ![](https://i.imgur.com/fPk4qDp.gif) * steps(int,start|end) 以上２種的進化型語法 * cubic-bezier(n,n,n,n) 以上語法可參考：https://www.oxxostudio.tw/articles/201803/css-animation.html #### ==動畫延遲時間 animation-delay：== * 動畫要延後多久才開始播放，預設 0 ，單位為 s 或 ms * 如果設定為「負值」，例如 -1s、-2s，得到的結果「**不會延遲，而是快轉**」 ex:一段動畫要 5 秒，animation-delay 設定為 -2s，那麼動畫將會直接從第二秒的位置開始播放，播放三秒後停止 ( 類似 5-2=3 的概念 )。 #### ==動畫播放次數 animation-iteration-count：== * 需設定大於0的數字，預設1，設定「**infinite**」表示無限重複播放 #### ==動畫播放方向 animation-direction：== ![](https://i.imgur.com/mFjh30d.png) * **normal**：正常播放，從 0% 到 100% (預設值) * **reverse**：反轉播放，從 100% 到 0% * **alternate**：正反轉輪流播放 奇數次為 0% 到 100%，偶數次為 100% 到 0% 若動畫播放次數只有一次就只會正常播放 * **alternate-reverse**：alternate的相反，奇數次為 100% 到 0%，偶數次為 0% 到 100%，若動畫播放次數只有一次就只會反轉播放。 #### ==動畫播放狀態 animation-play-state：== * **running**，預設值，表示動畫播放中 * **paused**，表示暫停 #### ==動畫播放前後模式(屬性) animation-fill-mode：== * **none**：預設值，不論動畫播放次數，結束後一律返回原始狀態。 * **forwards**：動畫結束後，保持在最後一個影格狀態。 * **backwards**：動畫結束後，保持在第一個影格狀態 ( 但實際測試和 none 效果一樣 )。 * **both**：依據動畫的次數或播放方向，保持在第一個影格或最後一個影格狀態，相當實用。 ### 總表整理如下: ![](https://i.imgur.com/v1E2yjW.png) :::danger 這八種屬性，亦可透過 **animation** 的屬性，做簡短的縮寫，用法如下： animation:name duration | timing-function | delay | iteration-count | direction | fill-mode | play-state; 縮寫除了在代碼上簡短許多，更可以讓「同一個元素套用多組動畫」，用法只需要在後方用逗點分隔即可 ::: --- ## Animation Events * animationstart：當動畫開始。 * animationend：當動畫結束。 * animationiteration：當動畫重複。 * animationcancel：當動畫中止 ( 目前還不支援 )。 練習:變色圓圈圈 ```htmlmixed= <title>animation動畫效果-變色圓圈圈</title> <style> @keyframes myanimation{ from { background-color: #55555; } to { background-color: #428bca; } } .box { width: 150px; height: 150px; background-color: lightgreen; border-radius: 50%; border: 1px dotted black; text-align: center; line-height: 150px; position: absolute; animation-name: myanimation; animation-duration: 2s; animation-timing-function: ease; animation-delay: 1s; } </style> </head> <body> <div class="box">light</div> </body> ``` 顯示如下: ![](https://i.imgur.com/ph39w6M.gif) --- 練習:抓方塊 ```htmlmixed= <title>animation動畫效果-抓方塊</title> <style> /*抓方塊*/ @keyframes ssanimation{ from { left: 10px; } to { left: 300px; } } .box2 { width: 100px; height: 100px; background-color: #428bca; border: 1px dotted black; text-align: center; line-height: 100px; position: absolute; animation-name: ssanimation; animation-duration: 1s; animation-timing-function: ease-in-out; animation-direction: alternate; animation-iteration-count: infinite; } .box2:hover { animation-play-state: paused; } </style> </head> <body> <!-- 抓方塊 --> <div class="box2">box2</div> </body> ``` 顯示如下: ![](https://i.imgur.com/mgrLW7q.gif) --- 練習:來回繞圈的方形 ```htmlmixed= <title>animation動畫效果-來回繞圈的方形</title> <style> /*方形繞圈圈*/ @keyframes squarecircle { 0% { background-color: #23C89C; left:10px; top:10px;} 25% { background-color: #F1CF3A; left:310px; top:10px;} 50% { background-color: #4DB3CE; left: 310px; top:210px;} 75% { background-color: #F9B885; left: 10px; top:210px;} 100% { background-color: #F76C91; left:10px; top:10px;} } .box3 { width: 100px; height: 100px; background-color: #BBE1F5; border: 10px dotted ##FCF8A7; text-align: center; line-height: 100px; position: absolute; animation: squarecircle 4s ease-in-out alternate infinite; } </style> </head> <body> <!-- 方形繞圈圈 --> <div class="box3">來回繞的方形</div> </body> ``` 顯示如下: ![](https://i.imgur.com/jhHLOZH.gif)