【從無到有】教你使用animation做簡單的動畫效果

今天寫寫怎么用animation屬性做一些簡單的動畫效果

在CSS選擇器中，使用animition動畫屬性，調用聲明好的關鍵幀 

首先聲明一個動畫（關鍵幀）：

@keyframes name{
	from{
　　　　}
	to{
　　　　}

}

@keyframes name{
	0%{
　　　　}
	50%{
　　　　}
        100%{
       }
}    

階段寫法：

①每個階段用百分比表示，從0%到100%

②起止必須設置，即0%和100%或者from和to

 

通常根據不同內核的瀏覽器要加上不同的前綴

比如：chrome、safari：@-webkit-keyframes

 

【Animation:縮寫順序】
Animation-name 動畫名稱(@keyframes 名稱)

Animation-duration 動畫持續時間

Animtaion-timing-function動畫速度曲線 常選ease

Animtaion-delay 動畫延遲時間

Animation-iteration-count 播放次數，默認為1，無限次Infinite

Animation-direction 設置對象動畫在循環中是否反向運動 （ Alternate 逆向播放）

* animation-fill-mode 設置對象動畫時間之外的狀態（forwards： 停留在動畫結束狀態 backwards:停留在動畫開始狀態）

>>> 注意animation-name和animation-duration必須設置
>>> animation可以同時設置多個動畫 動畫之間用,分隔
animation:frame1 .3s,frame2 .5s……

 

舉個例子：

新建一個div

<div class="div3"></div>

定義一個動畫

@-webkit-keyframes myframe{
				0%{
					background-color: #7FFFD4;
				}
				25%{
					background-color: coral;
				}
				50%{
					background-color: cornflowerblue;
				}
				100%{
					background-color: cyan;
				}
			}

　　

給這個div加上一些屬性

.div3{
				width: 100px;
				height: 100px;
				background-color: #7FFFD4;
				-webkit-animation: myframe 5s ease infinite;
			}

　　

 這樣就可以看到一個四個顏色不停變化的正方形了