技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運營

贊助商

分類目錄

贊助商

最新文章

搜索

一圖解釋 animation-direction 屬性 normal | reverse | alternate | alternate-reverse

作者:admin    時間:2022-3-17 13:45:37    瀏覽:

CSS3 animation 動畫屬性 animation-direction 是一個動畫方向的屬性,該屬性有4個值:normal | reverse | alternate | alternate-reverse,它們的運動方向是不同的,本文著重介紹它們的區(qū)別。

下圖一目了然顯示了 animation-direction 屬性 normal | reverse | alternate | alternate-reverse 它們的運動方向不同之處。

一圖解釋 animation-direction 屬性

animation-direction: normal;

動畫向前播放。當(dāng)它到達(dá)結(jié)尾時,它會從第一個關(guān)鍵幀重新開始。

animation-direction: reverse;

動畫向后播放:從最后一個關(guān)鍵幀開始,在第一個關(guān)鍵幀結(jié)束。

animation-direction: alternate;

動畫先向前播放,然后向后播放:

  • 從第一個關(guān)鍵幀開始
  • 停在最后一個關(guān)鍵幀
  • 重新開始,但在最后一個關(guān)鍵幀
  • 停在第一個關(guān)鍵幀

animation-direction: alternate-reverse;

動畫首先向后播放,然后向前播放:

  • 從最后一個關(guān)鍵幀開始
  • 停在第一個關(guān)鍵幀
  • 重新開始,但在第一個關(guān)鍵幀
  • 停在最后一個關(guān)鍵幀

您可能對以下文章也感興趣

標(biāo)簽: animation-direction  animation  
x
  • 站長推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */