大家早安，我是喵橘，今天要報告的 CSS 動畫部分，今天也請各位多多指教喔~

動畫關鍵影格設定

動畫的呈現就是由一個一個的關鍵影格所組合而成，所以，在設定動畫之前，要先把需要變化的關鍵影格設定完成，才能呈現不同變化的美。以下是關鍵影格的公式：

動畫效果的設定

動畫效果有許多設定的方法，如下表所顯示：

動畫影格設定注意事項

1. 若沒有設定好開頭結尾，系統也能自動演算出來。
2. 不可以獨自使用純數字，一定要加入百分比符號。
3. 如果有相同百分比數字，後面撰寫的設定會覆蓋前面撰寫的設定。

＜animation-name＞ 屬性

要製作動畫的第一步，就要先取要使用的動畫名稱，假如此功能沒設定，動畫名稱則會呈現 none。

＜animation-timing-function＞ 屬性

設定動畫轉換所需要的速度，從開始到結束都是以平滑轉換呈現。設定值如下表所顯示：

＜animation-direction＞ 屬性

設定動畫單次播放所需要的時間，單位為秒(s)，預設值為 0。

＜animation-delay＞ 屬性

設定動畫開始前所要等待的時間，單位為秒(s)，預設值為 0。

CSS
​

@keyframes orange {

	from { background-color: orange; }
	to   { background-color: green; }

}

div {
	text-align: center;
}
.box1 {
	width: 100px;
	height: 100px;
	background-color: lightblue;
	position: absolute;
	animation-name: orange;
	animation-timing-function: ease-in;
	animation-duration: 5s;
	animation-delay: 3s;
}

​
HTML
​

	<div class="box1">我是變化箱子</div>

​
​
範例圖示：
​

​

＜animation-iteration-count＞ 屬性

設定動畫播放的次數，預設為 1 ，假如設定 infinite 則會無限循環輪播。

＜animation-direction＞ 屬性

設定動畫播放的方向。

＜animation-play-state＞ 屬性

設定動畫播放情況，預設值為 播放中(英語：running)

CSS
​

@keyframes orange {
	from { left: 10px; }
	to   { left: 250px; }
}

div {
	text-align: center;
}
.box1 {
	width: 100px;
	height: 100px;
	background-color: lightblue;
	position: absolute;
	animation-name: orange;
	animation-timing-function: ease-in;
	animation-duration: 5s;
	animation-direction: alternate-reverse;
	animation-iteration-count: infinite;
}
.box1:hover {
	animation-play-state: paused;
}

​
HTML
​

	<div class="box1">我是變化箱子</div>

​
​
範例圖示：
​

​

＜ animation ＞ 快速寫法

假如熟悉 CSS 語法，就是要優化程式碼，這一個方法是最推薦也是對網頁執行效率最好的方法。

CSS
​

/*animation: 動畫名稱 動畫時間 動畫轉換方式 動畫轉換延遲時間 動畫重複次數 動畫播放方向 播放狀況*/
@keyframes orange {

	from { width: 0; }
	to   { width: 100%; }

}
.loadbar {
	background-color: orange;
	height: 5px;
	animation: orange 5s infinite ease-out;
}

​
HTML
​

	<div class="loadbar"></div>

​
​
範例圖示：
​

​

明天預告

​
今天是講解 CSS 動畫設定，明天是 CSS 總整理部分，非常感恩大家觀看。