animation?動畫屬性介紹

?

animation?屬性是一個簡寫屬性，用于設置動畫屬性：

1.?animation-name----規定需要綁定到選擇器的?keyframe?名稱。

語法：animation-name:?keyframename|none；

Keyframename：規定需要綁定到選擇器的?keyframe?的名稱。

None：?規定無動畫效果（可用于覆蓋來自級聯的動畫）。

?

例如：

{

-webkit-animation-name:?my_animation;

-moz-animation-name：my_animation;

-ms-animation-name：my_animation;

-o-animation-name:?my_animation;

animation-name:?my_animation;

}

@-webkit-keyframes?my_animation{}?

@-moz-keyframes?my_animation{}

@-ms-keyframes?my_animation{}

@-o-keyframes?my_animation{}

@keyframes?my_animation{}

?

2.?animation-duration----規定完成動畫所花費的時間，以秒或毫秒計。

語法：animation-duration:?time;

time ：?規定完成動畫所花費的時間。默認值是?0，意味著沒有動畫效果。

例如：

{

-webkit-animation-duration:?2s;

-moz-animation-duration：2s;

-ms-animation-duration：2s;

-o-animation-duration:?2s;

animation--duration:?2s;

}

3.?animation-timing-function----規定動畫的速度曲線

語法：animation-timing-function:?value;

Value值:

linear：動畫從頭到尾的速度是相同的。

ease：默認。動畫以低速開始，然后加快，在結束前變慢。

ease-in：動畫以低速開始。

ease-out ：動畫以低速結束。

ease-in-out：動畫以低速開始和結束。

cubic-bezier(n,n,n,n)：在?cubic-bezier?函數中自己的值。可能的值是從?0?到?1?的數值。

例如：

{animation-timing-function:linear;}

{animation-timing-function:ease;}

{animation-timing-function:ease-in;}

{animation-timing-function:ease-out;}

{animation-timing-function:ease-in-out;}

?

4.?animation-delay----規定在動畫開始之前的延遲

語法：animation-delay:?time;

Time值：可選。定義動畫開始前等待的時間，以秒或毫秒計。默認值是?0。允許負值，-2s?使動畫馬上開始，但跳過?2?秒進入動畫。

{

animation-delay:2s;

-webkit-animation-delay:2s;

}

?

5.?animation-iteration-count----規定動畫應該播放的次數

語法：animation-iteration-count:?n|infinite;

n：定義動畫播放次數的數值。

infinite：規定動畫應該無限次播放。默認值為：1。

示例：

{

animation-iteration-count:infinite;

-webkit-animation-iteration-count:infinite;

}

6.?animation-direction----規定是否應該輪流反向播放動畫

語法：animation-direction:?normal|alternate;

normal：默認值。動畫應該正常播放。

alternate ：動畫應該輪流反向播放。

注釋：如果把動畫設置為只播放一次，則該屬性沒有效果。

示例：

{

animation-direction:alternate;

-webkit-animation-direction:alternate;

}

7.?animation-play-state?屬性規定動畫正在運行還是暫停

語法：animation-play-state:?paused|running;

paused：規定動畫已暫停。

running：規定動畫正在播放。

注釋：可以在?JavaScript?中使用該屬性，這樣就能在播放過程中暫停動畫。

示例：

{

animation-play-state:running;

-webkit-animation-play-state:running;

}

8.?animation-fill-mode?屬性規定動畫在播放之前或之后，其動畫效果是否可見

語法：animation-fill-mode?:?none?|?forwards?|?backwards?|?both;

none：不改變默認行為。

forwards ：當動畫完成后，保持最后一個屬性值（在最后一個關鍵幀中定義）。

backwards：在?animation-delay?所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。

both ：向前和向后填充模式都被應用。

轉載于:https://www.cnblogs.com/wuph/p/4502644.html

總結

以上是生活随笔為你收集整理的css3 animation 动画属性简介的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。