---
# System prepended metadata

title: CSS 動畫效果 @keyframes  animation
tags: [CSS]

---

# 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)