什麼是 CSS 動畫方向屬性：你需要知道的一切

你認為 CSS 僅用於創建動畫是什麼？ 確實如此，但除此之外，您還可以利用 CSS 來控制速度、持續時間、方向、開始時間等。

無論您希望動畫向上還是向下移動，Web 開發中的 CSS 動畫方向屬性都可以讓您實現目標。

你是新手嗎？ 不用擔心！ 在本博客中，您將了解有關 CSS 動畫屬性的所有信息。

現在，事不宜遲，讓我們了解 CSS 動畫的全部內容以及它的用法。

什麼是 CSS 動畫方向屬性？

CSS動畫方向屬性是關於動畫的方向。 設置此屬性後，您可以輕鬆地設置動畫循環向後、向前或交替方向。

現在，讓我們看看不同的動畫方向：

• 動畫方向：正常；
• 動畫方向：反向；
• 動畫方向：交替反轉；
• 動畫方向：交替；

為了進一步幫助您，我分享了動畫方向屬性語法。 希望這種語法可以幫助您像專業人士一樣創建動畫。

/* CSS動畫屬性的Single動畫 */

• 動畫方向：正常；
• 動畫方向：反向；
• 動畫方向：交替；
• 動畫方向：交替反轉；

/* CSS動畫屬性的Multiple動畫 */

• 動畫方向：正常，反向；
• 動畫方向：交替，反向，正常；

/* CSS 動畫屬性的全局值 */

• 動畫方向：繼承；
• 動畫方向：初始；
• 動畫方向：還原；
• 動畫方向：未設置；

現在您已經了解了不同的 CSS 動畫屬性，是時候了解 CSS 動畫屬性的值了。

CSS 動畫屬性值

普通的

如果使用此屬性，動畫將向前播放。 這意味著對於每個動畫循環，動畫將重置為開始狀態並重新開始。

值 -"Normal" 基本上是 CSS 中動畫方向屬性的默認值。 因此，如果您不設置此屬性，則默認情況下，它將向前播放。

撤銷

反向動畫是關於每個循環以相反方向完成的動畫。 在這種風格中，動畫步驟和計時功能是向後執行的。

例如，緩入計時功能變成緩出。

備用

交替動畫在每個循環中反轉方向，第一次迭代為正向。 計數是為了確定一個週期是奇數還是偶數從一開始。

交替反向

交替反轉反轉每個循環的方向，第一次迭代向後播放。 計數是為了確定一個週期是偶數還是奇數，從一開始。

動畫方向的 CSS 簡寫

您會驚奇地發現，您還可以設置各種動畫屬性，包括動畫方向，這可以通過使用動畫速記 CSS 屬性來完成。

CSS 動畫速記屬性在樣式之間應用動畫。 它是設置所有動畫屬性的簡寫方法，如動畫名稱、動畫持續時間、動畫定時功能、動畫延遲、動畫迭代計數、動畫方向、動畫填充模式和動畫播放-狀態。

常見的 CSS 動畫問題

無論您的動畫沒有按您想要的方式運行，還是根本無法運行，以下是問題的一些原因以及解決方法：

沒有@keyframes 規則

在 CSS 動畫中，@keyframes 規則定義了動畫的外觀。 更具體地說，它定義了哪些元素樣式更改以及何時更改。 如果沒有此規則，您的元素將無法使用任何動畫。 所以下一次，檢查您的@keyframes 規則是否存在，以及它的名稱是否與目標元素的動畫名稱匹配。

未設置動畫持續時間

假設您已經為元素分配了關鍵幀規則，但如果您沒有設置動畫持續時間，它仍然不會播放。 默認情況下，零秒長是 CSS 動畫週期。

要覆蓋這個循環，你需要在你的目標元素中加入一個動畫持續時間規則和一個秒值，就像在同一個塊中作為動畫名稱一樣。

動畫開始得太早

有時，您可能需要在動畫開始之前快速推遲，以獲得更高的消費者體驗。 使用動畫延遲物品完成此操作。

不可動畫的 CSS 屬性

動畫不起作用的另一個原因可能是您嘗試為不可動畫的 CSS 屬性設置動畫。

不支持 CSS 動畫

CSS 動畫在當今最大的移動和計算機瀏覽器上繪畫。 但是，如果您使用的是較舊的瀏覽器或多年未更新的瀏覽器模型，您的動畫將無法正常工作，毫無疑問是因為缺少瀏覽器支持。

如果您已更新瀏覽器但仍然遇到問題，請嘗試在您的真實策略中進一步包含帶有供應商前綴的動畫策略，然後再次嘗試動畫。

CSS 速記寫錯了

CSS 速記是編寫清潔 CSS 並減少文件中代碼數量的絕佳方式。 動畫物品是那些 CSS 房屋的簡寫：

• 動畫時期
• 動畫調用
• 動畫推遲
• 動畫方向
• 動畫填充模式
• 動畫迭代依賴
• 動畫國家
• 動畫定時功能

需要兩個值——一個用於動畫週期，一個用於動畫調用——是必需的。 除此之外，值的順序決定了將哪個價格分配給哪個動畫物品。

未對齊的值應該會導致動畫的行為與您的預期不同。 所以，如果動畫速記的使用屬於，那​​麼確保它的值在正確的順序內被索引。

性能緩慢

CSS 動畫的整體性能往往比不同類型的互聯網動畫更高。 然而，現在不再所有的 CSS 動畫都是平等的，一些活潑的模式會逐漸降低整體性能。

大多數簡單的 CSS 動畫對網頁加載時間沒有任何重大影響。 但是，您在動畫中上傳的結果越多，您遇到整體性能問題的可能性就越大。

為避免整體性能不佳，Google 建議您限制使用會導致重繪的動畫。 繪畫是瀏覽器在屏幕上使用像素創建互聯網網頁像素的可見顯示。 繪畫使用大量的處理能力，因此您必須盡可能多地限制各種重繪，因為動畫。

不幸的是，最大的可動畫 CSS 房屋在更改時會導致重繪。 這種變換（例如縮放、旋轉和位置）和不透明度的例外情況，它們可能是活潑的，對整體性能的影響最小。 這是 CSS 房屋在活躍時導致重繪的參考。

不過，不要讓這阻止你完全放棄動畫。 如果您遇到節奏問題，這可能是由於您正在尋求立即執行許多操作或使用動畫來處理至少一個大量細節或元素組織。

在網站上，CSS 動畫是一流的，但它們被巧妙地用來美化體驗，所以請記住您是否想要復雜的動畫與訪問者互動。

最後說

是的，HubSpot 允許您通過使用正確的 CSS 代碼來控制動畫的方向。 出色地！ 我完全同意 CSS 動畫方向屬性是很多人不知道的一件事。

但是，是的，在閱讀了這篇博客之後，您肯定會熟悉控制動畫並為您的網站設計提供吸引人且用戶友好的外觀的方式。 那你還在等什麼？ 準備好構建吸引目標受眾的設計。

在設計網站時仍需要任何幫助，請隨時與我們聯繫。 我們的專家也會幫助您。

編輯：迪維亞