動畫 animation 關鍵幀 的總結（上）：

animation動畫提供幾個屬性如下：

01 keyframes（關鍵幀）

計算機動畫術語，幀-就是動畫中最小單位的單幅影像畫面，相當於電影膠片上的每一格鏡頭。在動畫軟體的時間軸幀表現為一格或一個標記。

關鍵幀——相當於二維動畫中的原畫。指角色或者物體運動或變化中的關鍵動作所處的那一幀。關鍵幀與關鍵幀之間的動畫可以由軟體來建立，叫做過渡幀或者中間幀。

keyframes被稱為關鍵幀，其類似於Flash中的關鍵幀。在CSS3中其主要以“@keyframes”開頭，後面緊跟著是動畫名稱加上一對花括號“{…}”，括號中就是一些不同時間段樣式規則。

在一個“@keyframes”中的樣式規則可以由多個百分比構成的，

如在“0%”到“100%”之間建立更多個百分比，分別給每個百分比中給需要有動畫效果的元素加上不同的樣式，

從而達到一種在不斷變化的效果。

設定基礎樣式如下：

div {
	width: 200px;
	height: 200px;
    border-radius: 100%;
	margin: 100px auto;
	background: #0F3;
}
div:hover{
	animation:changecolor 3s ease-in 0.3s 2;
}

通過不同的百分比切換不同的顏色如下：

@keyframes changecolor{
	0%{
		background:green;
	}
	20%{
		background:pink;
	}
	40%{
		background:red;
	}
	60%{
		background:#000;
	}
	100%{
		background:orange;
	}
}
 

效果呈現：

02呼叫動畫

animation-name屬性:主要是用來呼叫 @keyframes 定義好的動畫。

需要特別注意: animation-name 呼叫的動畫名需要和“@keyframes”定義的動畫名稱完全一致（區分大小寫），

如果不一致將不具有任何動畫效果。

屬性值：

none:預設值。當值為 none 時，將沒有任何動畫效果,這可以用於覆蓋任何動畫。

“@keyframes”定義的動畫名稱。

03 ----animation-duration設定動畫播放時間

animation-duration主要用來設定CSS3動畫播放時間，其使用方法和transition-duration類似，是用來指定元素播放動畫所持續的時間長，也就是完成從0%到100%一次動畫所需時間。單位：S秒

設定基礎樣式如下：

div {
  width: 200px;
  height: 200px;
  background: #000;
  margin: 100px auto;
  animation-name:h1;/*規定需要繫結到選擇器的 keyframe 名稱。。*/
  animation-duration:2s;/*規定完成動畫所花費的時間，以秒或毫秒計。*/
  animation-timing-function:linear;/*規定動畫的速度曲線。*/
  animation-delay:.5s;/*規定在動畫開始之前的延遲。*/
  animation-iteration-count:infinite;/*規定動畫應該播放的次數。*/
}

通過不同的百分比切換不同的邊框圓角如下：

@keyframes h1{
  from {
    border-radius: 0;
  }
  to {
    border-radius: 50%;
  }
}

效果呈現：