卡卡網(wǎng)

CSS3 animation 動(dòng)畫屬性 animation-direction 是一個(gè)動(dòng)畫方向的屬性，該屬性有4個(gè)值：normal | reverse | alternate | alternate-reverse，它們的運(yùn)動(dòng)方向是不同的，本文著重介紹它們的區(qū)別。

下圖一目了然顯示了 animation-direction 屬性 normal | reverse | alternate | alternate-reverse 它們的運(yùn)動(dòng)方向不同之處。

animation-direction: normal;

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

animation-direction: reverse;

動(dòng)畫向后播放：從最后一個(gè)關(guān)鍵幀開始，在第一個(gè)關(guān)鍵幀結(jié)束。

animation-direction: alternate;

動(dòng)畫先向前播放，然后向后播放：

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

animation-direction: alternate-reverse;

動(dòng)畫首先向后播放，然后向前播放：

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

您可能對(duì)以下文章也感興趣

• 一圖解釋 animation-timing-function 6個(gè)屬性值的區(qū)別
• 一圖了解animation-fill-mode: none|forwards|backwards|both各屬性值
• 【實(shí)例】詳解 CSS3 animation 6個(gè)動(dòng)畫屬性
• 一圖理解animation屬性linear/ease/ease-in/ease-out/ease-in-out
• 實(shí)例分析CSS3 transform: translateY() rotate() rotateY() rotateX()
• CSS3 transform: scale() 縮放轉(zhuǎn)換【實(shí)例分析演示】
• 純CSS實(shí)現(xiàn)的星光動(dòng)畫背景

標(biāo)簽: animation-direction  animation