13. 動畫

之前介紹的transition應也算是動畫的一部分，此處介紹另一製作方式: 使用keyframes。 display: flex;來實現。主要流程如下，前面四項必須給定:

animation-name: 命名欲成為動畫的物件，這樣才知道要作用在那個物件身上
animation-duration: 確認動畫作用時間，例如5s。
給元件初始狀態: 例如background: blue 或 position: relative。
from, to, %: 給每個階段的狀態，from=0%, to=100%
animation-delay: 設定delay時間，也就是經過幾秒才開始動畫。 如果給的時間是負數，例如-2s，表示從2s時間開始動畫。
animation-iteration-count: 動畫重複次數，infinite表示無限循環
animation-direction: 設定動畫方向，可用參數如下:
- normal: 正常方向
- reverse: 反向
- alternate: 先正向再反向
- alternate-reverse: 先反向再正向
animation-timing-function: 給時間函數，可用參數如下:
- ease: 開始結束慢，中間快(預設值)
- linear: 均速
- ease-in: 開始慢
- ease-out: 結束慢
- ease-in-out: 開始結束慢
- cubic-bezier(n,n,n,n): 自定義速度
animation: name duration timefunction delay iteration direction: 簡寫

舉例說明，首先先設計一個方塊，html元件如下:

	<div class="css13_1">
	</div>

	div.css13_1{
		width: 100px;
		height: 100px;
		animation-name: div13_1; /*給名字*/
		animation-duration: 4s; /*給時間*/
		background: green; /*給初始狀態*/
		position: relative; /*給初始狀態*/
		animation-delay: 0.5s; /*給延緩時間(optional)*/
		animation-iteration-count: infinite; /*給重複次數(optional)*/
		animation-direction: alternate; /*給動畫方向(optional)*/
		animation-timing-function: ease-in-out; /*給動畫速度(optional)*/

	}

	@keyframes div13_1{
		/*給各階段狀態*/
		from { /*0%*/
			background: green;
			left: 0px;
		}
		25% {
			background: orange;
			left: 100px;
		}
		50% {
			background: blue;
			left: 200px;
		}
		75% {
			background: red;
			left: 300px;
		}
		to { /*100%*/
			background: yellow;
			left: 400px;
		}
	}