掌握CSS基本動畫概念

CSS動畫：賦予網站活力與動感的魔法

CSS動畫如同魔術般，讓網站更具活力和吸引力。透過動畫，您可以輕鬆移動網站元素、更改其顏色並平滑調整其大小。

為了讓您的動畫更具互動性和流暢性，您首先需要了解基本的動畫概念。在本篇文章中，您將學習動畫的基本規則語法和動畫屬性，以控制動畫的行為。

讓我們開始吧！ ?

要開始使用CSS動畫，您需要了解兩個基本組件：

• @keyframes: 動畫的藍圖。
• 動畫屬性: 控制動畫的設定。

@keyframes

@keyframes是動畫的路線圖，您可以在其中定義動畫的起點和終點以及動畫之間的步驟。

這意味著，這部分定義了動畫如何開始，如何在中間運行以及動畫如何結束。

文法:

<code>@keyframes animationName {
  from {
    /* 开始样式 */
  }
  to {
    /* 结束样式 */
  }
}</code>

例如:

<code>@keyframes fadeIn {
  from {
    opacity: 0; /* 不可见 */
  }
  to {
    opacity: 1; /* 可见 */
  }
}</code>

在此範例中，元素的不透明度將從0開始，然後變為1。

在繼續之前，請查看這份電子書，它將使您成為CSS動畫專家：

? CSS動畫精要：最佳實務、技巧與效能提示

從簡單的淡入淡出到複雜的動畫，這份電子書涵蓋了掌握CSS動畫所需的一切，包括：

• 定時函數
• 關鍵影格與動畫流程
• 效能最佳化
• 真實世界的應用

非常適合希望創建流暢CSS動畫的開發者。立即取得您的副本！

動畫屬性

為了自訂CSS動畫，使用了不同的屬性，每個屬性都有其自身的作用，定義了動畫的行為。

動畫屬性直接套用於元素，定義動畫的名稱、持續時間、延遲、方向等。

文法:

<code>.element {
  animation-name: fadeIn; /* 动画名称或@keyframes */
  animation-duration: 2s; /* 动画持续时间 */
}</code>

例如:

<code>.box {
   height: 100px;
   width: 100px;
   background-color: rgb(44, 117, 117);
   animation-name: fadeIn;  /* 动画名称 */
   animation-duration: 2s; /* 动画持续时间 */
}
@keyframes fadeIn {
   from {
     opacity: 0; /* 不可见 */
   }
   to {
     opacity: 1; /* 可见 */
   }
}</code>

在此範例中，類別名稱為「box」的元素最初將不可見，兩秒鐘後將可見，從而產生平滑的淡入效果。

在CSS中，您有以下動畫屬性：

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state

現在，讓我們來了解每個屬性。

animation-name

作用：

此屬性用於定義應套用哪個@keyframes動畫。

例如，如果您有兩個名為fadeIn或fadeOut的@keyframes，則可以使用animation-name屬性定義應在哪個元素上套用fadeIn動畫以及在哪個元素上套用fadeOut動畫。

文法:

<code>animation-name: animationName;</code>

例如:

<code>animation-name: fadeIn;</code>

animation-name屬性是運行動畫所必需的。

animation-duration

作用：

此屬性定義動畫的持續時間，即動畫運行需要多長時間。

您可以以秒(s)或毫秒(ms)為單位定義動畫持續時間。

語法:

<code>@keyframes animationName {
  from {
    /* 开始样式 */
  }
  to {
    /* 结束样式 */
  }
}</code>

例如:

<code>@keyframes fadeIn {
  from {
    opacity: 0; /* 不可见 */
  }
  to {
    opacity: 1; /* 可见 */
  }
}</code>

如果您不定義animation-duration，則它將自動設置為0s（默認值），這將使動畫實際上失效。

animation-timing-function

作用：

此屬性用於定義動畫的速度模式。這意味著，您可以使用此屬性定義動畫是緩慢開始、以恆定速度運行還是快速運行。

它具有以下值：

• linear：動畫將以恆定速度運行。
• ease：緩慢開始，中間快速，緩慢結束。
• ease-in：緩慢開始。
• ease-out：緩慢結束。
• ease-in-out：緩慢開始和緩慢結束。
• cubic-bezier(x1, y1, x2, y2)：自定義速度模式。

示例：

<code>.element {
  animation-name: fadeIn; /* 动画名称或@keyframes */
  animation-duration: 2s; /* 动画持续时间 */
}</code>

animation-delay

作用：

此屬性定義動畫在開始之前將等待多長時間，即動畫的延遲。

語法:

<code>.box {
   height: 100px;
   width: 100px;
   background-color: rgb(44, 117, 117);
   animation-name: fadeIn;  /* 动画名称 */
   animation-duration: 2s; /* 动画持续时间 */
}
@keyframes fadeIn {
   from {
     opacity: 0; /* 不可见 */
   }
   to {
     opacity: 1; /* 可见 */
   }
}</code>

示例:

<code>animation-name: animationName;</code>

animation-iteration-count

作用：

此屬性用於定義動畫的重複次數，即動畫將重複多少次。

它具有以下值：

• 1：動畫將只運行一次（這是默認值）。
• infinite：動畫將不斷重複。
• 任何數字：動畫將運行您定義的次數。

示例:

<code>animation-name: fadeIn;</code>

animation-direction

作用：

此屬性定義動畫的方向。

它具有以下值：

• normal：動畫將向前運行（這是默認值）。
• reverse：動畫將反向運行。
• alternate：動畫將交替運行，一次向前，一次向後。
• alternate-reverse：動畫將首先反向運行，然後向前運行。

示例：

<code>animation-duration: time;</code>

animation-fill-mode

作用：

此屬性用於定義動畫開始之前和結束之後的元素樣式。它定義了在動畫未播放時應將哪些樣式應用於元素。

它允許您控制動畫之前和之後元素的外觀，使您在動畫過程中管理元素狀態時更靈活。

它具有以下值：

• none：動畫前後不應用任何樣式。
• forwards：保留動畫的結束樣式。
• backwards：這也會在延遲時間內應用動畫的起始樣式。
• both：處理開始和結束的樣式。

示例：

<code>animation-duration: 4s; /* 动画将运行4秒 */</code>

animation-play-state

作用：

此屬性指定動畫的狀態：運行或暫停。

它具有以下值：

• running：動畫將繼續。
• paused：動畫將停止，但將保留狀態。

示例：

<code>@keyframes animationName {
  from {
    /* 开始样式 */
  }
  to {
    /* 结束样式 */
  }
}</code>

此屬性用於交互式動畫，例如，在懸停時暫停動畫。

動畫簡寫語法

動畫簡寫允許您在一行中定義多個動畫屬性。您可以將它們組合成一行以提高可讀性，而不是逐個編寫每個動畫屬性。

語法:

<code>@keyframes fadeIn {
  from {
    opacity: 0; /* 不可见 */
  }
  to {
    opacity: 1; /* 可见 */
  }
}</code>

示例:

<code>.element {
  animation-name: fadeIn; /* 动画名称或@keyframes */
  animation-duration: 2s; /* 动画持续时间 */
}</code>

這裡，

• slide：動畫的名稱。
• 3s：動畫持續時間為3秒。
• ease-in-out：定時函數為ease-in-out，這意味著動畫將緩慢開始，加速，然後再次減速。
• 1s：動畫將在1秒延遲後開始。
• infinite：動畫將無限重複。
• alternate：動畫將在每次迭代中在向前和向後移動之間交替。
• forwards：動畫完成後，將在最後一個關鍵幀（在100%處）應用的樣式將被保留。

動畫速查表

我創建了一個全面的CSS動畫速查表，其中涵蓋了CSS動畫中使用的所有關鍵概念、屬性和語法。

您可以通過單擊下面的鏈接在GitHub上下載速查表：

https://www.php.cn/link/02f5df8adf0db026d38425594e68a007

就是這樣。

我希望它對您有所幫助。

感謝您的閱讀。

如果您覺得我的文章有幫助，並想支持我的工作，請考慮請我喝杯咖啡☕。

更多此類內容，請點擊此處。

在X(Twitter)上關注我，獲取每日Web開發技巧。

繼續編碼！ ！

以上是掌握CSS基本動畫概念的詳細內容。更多資訊請關注PHP中文網其他相關文章！