CSS 3 動畫2D

標籤：相容   屬性   eve   規則   linear   ges   反轉   frame   首碼   

動畫分為兩種,1,逐幀動畫  組成動畫的每一個畫面就是一幀 2,主要畫面格動畫,確定主要畫面格電腦會自動過度

動畫中如果遇到不相容的問題也是要加首碼  

@-webkit-keyframes規則   @-webkit-animation屬性

 

主要畫面格動畫: @keyframes + 動畫名稱

第一幀最後一幀

from:第一幀動畫
to:最後一幀動畫

 

@keyframes donghua{

 from {
width: 100px;height: 100px;
}
to {
width: 20px;height: 200px
}

 

 

主要畫面格動畫: @keyframes + 動畫名稱

進度的形式設定主要畫面格
 @keyframes myAnimation{
　　　　0%{width: 50px; height: 100px}
　　　　50%{width: 100px;height:100px}
　　　　100%{width: 100px;height:200px}
} 

 

 調用動畫

調用動畫的可選屬性

(3)設定動畫的延遲時間
animation-delay: 1s;

(4)設定動畫的方向 direction
normal: 預設值 正常方向
reverse: 反轉
alternate: 逐次取反

animation-direction: alternate;

(5)設定動畫執行的次數 iteration
觸發動畫執行條件 並且保持該條件
infinite:無限次  或數字

animation-iteration-count: 1 ;

(6) 設定元素播放前後的填充狀態
none:預設值;
backwards:設定元素動畫之前的狀態和第一幀相同
forwards:設定元素動畫完成之後的狀態和最後一幀相同
both:backwards+forwards

animation-fill-mode: both;

(7)控制元素動畫播放的狀態
running: 執行;
paused: 暫停

animation-play-state: paused;

(8)控制動畫播放運動形式
animation-timing-function: ease-in;

linear  勻速

ease   緩衝

ease-in由慢到快

ease-out由快到慢

ease-in-out由慢到快再慢

 

CSS 3 動畫2D