1. 程式人生 > >關於css 動畫的小常識 平時用到的基礎知識

關於css 動畫的小常識 平時用到的基礎知識

animation(動畫)

1:先繫結動畫: 如果想要某個div(或者其它)被賦予動畫,必須要繫結動畫  如圖

 

在該div的css中加入animation,而後面的第一個屬性值就代表繫結動畫的名稱,第二個屬性值規定該動畫在多長時間內完成,第三個屬性值是是否迴圈播放(預設是不迴圈)。當用戶繫結動畫後 必須要寫入動畫的動態效果

 如圖     各個百分號代表每個時間段呈現什麼樣的效果,百分比可以隨便設定,但是開頭和結尾必須是0%和100%

2:實現動畫的來回滾動: 必須要加一個animation-direction:alternate;  這個的意思是:指定是否應該輪流反向播放動畫。

3:把物體動畫地從一個地方移動到另一個地方,並讓它停留在那裡:    在css加入:animation-fill-mode: forwards;     animation-iteration-count:1;

如圖是對animation-fill-mode  兩個屬性值的介紹

 

animation-iteration-count:是動畫播放次數