如何開始CSS動畫

CSS動畫：超越CSS過渡的動態效果

CSS動畫是CSS過渡的進階版，它支持無限循環、利用關鍵幀創建複雜效果，並可在動畫播放過程中暫停。本文將深入探討CSS動畫的方方面面，助您輕鬆掌握這項強大的網頁設計技術。

創建CSS動畫：關鍵幀與動畫屬性

要創建CSS動畫，首先需要定義一個@keyframes規則，該規則指定動畫名稱並分組關鍵幀規則。然後，將動畫應用於目標元素。

CSS動畫可通過多種屬性進行控制，包括：animation-delay（動畫延遲）、animation-duration（動畫持續時間）、animation-name（動畫名稱）、animation-timing-function（動畫計時函數）、animation-iteration-count（動畫迭代次數）、animation-direction（動畫方向）、animation-play-state（動畫播放狀態）和animation-fill-mode（動畫填充模式）。

動畫控制：暫停與循環

使用animation-play-state屬性可以暫停動畫。將animation-iteration-count屬性設置為infinite可以實現無限循環。

性能與可訪問性：謹慎使用動畫

雖然CSS動畫可以增強用戶體驗，但應謹慎使用，因為它可能存在可訪問性風險，例如：某些疾病患者可能會因動畫產生眩暈或噁心，而患有光敏性癲癇的人則可能因動畫引發癲癇發作。此外，動畫的性能也會受到動畫屬性的影響，某些屬性可能會觸發回流或重繪，從而導致低性能設備上的性能下降。

動畫與過渡的區別：關鍵差異

CSS動畫與其姊妹技術CSS過渡相比，存在一些關鍵區別：

• 優雅降級：動畫缺乏優雅降級機制，瀏覽器不支持時，動畫將失效，需要JavaScript作為替代方案。
• 循環：動畫可以重複，甚至無限重複；而過渡始終是有限的。
• 關鍵幀：動畫使用關鍵幀，能夠創建更複雜和細緻的效果。
• 暫停：動畫可以在播放週期中暫停。

瀏覽器兼容性：主流瀏覽器支持

所有主流瀏覽器的最新版本都支持CSS動畫。 Firefox 15及更早版本需要-moz-前綴；而更高版本則不需要。 Internet Explorer 10和11以及所有版本的Microsoft Edge也都支持無前綴的動畫。

檢測動畫支持：JavaScript方法

可以通過多種方式檢測CSS動畫的支持情況。第一種方法是測試window對象的CSSKeyframeRule方法是否存在：

<code class="language-javascript">const hasAnimations = 'CSSKeyframeRule' in window;</code>

如果瀏覽器支持@supports規則和CSS.supports() API，則可以使用以下方法：

<code class="language-javascript">const hasAnimations = CSS.supports('animation-duration: 2s');</code>

創建第一個動畫：關鍵幀規則與動畫應用

首先，使用@keyframes規則定義動畫。 @keyframes規則有兩個作用：

• 設置動畫名稱
• 分組關鍵幀規則

例如，創建一個名為pulse的動畫：

<code class="language-css">@keyframes pulse {
    from {
        transform: scale(0.5);
        opacity: .8;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}</code>

然後，將動畫應用於元素：

<code class="language-css">.pulse {
    animation: pulse 500ms;
}</code>

動畫屬性詳解：細緻控制動畫效果

雖然使用animation速記屬性更簡潔，但有時使用長格式屬性更清晰。以下是長格式動畫屬性：

屬性

描述

初始值

animation-delay

動畫執行前的等待時間

0s (立即執行)

animation-duration

動畫週期持續時間

0s (無動畫)

animation-name

属性	描述	初始值
animation-delay	动画执行前的等待时间	0s (立即执行)
animation-duration	动画周期持续时间	0s (无动画)
animation-name	@keyframes规则的名称	none
animation-timing-function	计算起始状态和结束状态之间值的计算方式	ease
animation-iteration-count	动画重复次数	1
animation-direction	动画是否反向播放	normal (不反向)
animation-play-state	动画是运行还是暂停	running
animation-fill-mode	指定动画未运行时应用的属性值	none

規則的名稱

none

animation-timing-function

計算起始狀態和結束狀態之間值的計算方式

ease

animation-iteration-count

動畫重複次數

1

animation-direction

動畫是否反向播放

normal (不反向)

animation-play-state

動畫是運行還是暫停

running

animation-fill-mode

指定動畫未運行時應用的屬性值

none

循環動畫：animation-iteration-count屬性

將animation-iteration-count屬性設置為infinite可以使動畫無限循環。

動畫方向：animation-direction屬性

animation-direction屬性接受四個值：normal、reverse、alternate和alternate-reverse，用於控制動畫的播放方向。

百分比關鍵幀：創建更複雜的動畫序列

可以使用百分比關鍵幀創建更複雜的動畫序列。

動畫填充模式：animation-fill-mode屬性

animation-fill-mode屬性控制動畫開始前和結束後的元素樣式。

暫停動畫：animation-play-state屬性

使用animation-play-state屬性可以暫停和恢復動畫。

檢測動畫事件：animationstart、animationend和animationiteration事件

可以使用JavaScript監聽animationstart、animationend和animationiteration事件。

性能優化：選擇合適的動畫屬性

某些屬性比其他屬性創建的動畫性能更好。避免動畫那些會觸發回流或重繪的屬性。

常見問題解答

本文最後還包含了關於CSS動畫的常見問題解答，涵蓋了CSS動畫與CSS過渡的區別、動畫速度控制、@keyframes規則的作用、佈局動畫、反向播放動畫、animation-fill-mode屬性、暫停動畫、無限循環動畫、SVG元素動畫以及animation-delay和animation-end-delay的區別等方面。

通過學習本文，您將能夠創建出更精細、更複雜的CSS動畫效果，提升網頁的交互性和用戶體驗。 記住，在使用動畫時，始終要優先考慮性能和可訪問性。

以上是如何開始CSS動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！