CSS動(dòng)畫(huà)（Animation）是CSS3中一個(gè)強(qiáng)大的特性，允許您創(chuàng)建復(fù)雜的動(dòng)畫(huà)效果而無(wú)需使用JavaScript或Flash。動(dòng)畫(huà)( animation)是CSS3中具有顛覆性的特征之ー,可通過(guò)設(shè)置多個(gè)節(jié)點(diǎn)來(lái)精確控制一個(gè)或一組動(dòng)畫(huà)常用來(lái)實(shí)現(xiàn)復(fù)雜的動(dòng)畫(huà)效果。

相比較過(guò)渡，動(dòng)畫(huà)可以實(shí)現(xiàn)更多變化，更多控制的效果。

一、基本概念

CSS動(dòng)畫(huà)由兩部分組成：

@keyframes規(guī)則 - 定義動(dòng)畫(huà)序列

animation屬性 - 將動(dòng)畫(huà)應(yīng)用到元素并控制其行為

二、@keyframes 規(guī)則

@keyframes 用于定義動(dòng)畫(huà)在不同階段的樣式變化。

語(yǔ)法：

@keyframes animation-name {
  from {
    /* 起始狀態(tài) */
  }
  to {
    /* 結(jié)束狀態(tài) */
  }
}

/* 或使用百分比 */
@keyframes animation-name {
  0% {
    /* 起始狀態(tài) */
  }
  50% {
    /* 中間狀態(tài) */
  }
  100% {
    /* 結(jié)束狀態(tài) */
  }
}

示例：

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
}

三、Animation 屬性

1. animation-name

指定要使用的@keyframes動(dòng)畫(huà)名稱。

.element {
  animation-name: slideIn;
}

2. animation-duration

定義動(dòng)畫(huà)完成一個(gè)周期所需的時(shí)間。

.element {
  animation-duration: 2s; /* 2秒 */
  animation-duration: 500ms; /* 500毫秒 */
}

3. animation-timing-function

設(shè)置動(dòng)畫(huà)的速度曲線，控制動(dòng)畫(huà)的加速/減速方式。

.element {
  /* 預(yù)定義值 */
  animation-timing-function: ease; /* 默認(rèn)，慢-快-慢 */
  animation-timing-function: linear; /* 勻速 */
  animation-timing-function: ease-in; /* 慢開(kāi)始 */
  animation-timing-function: ease-out; /* 慢結(jié)束 */
  animation-timing-function: ease-in-out; /* 慢開(kāi)始和結(jié)束 */
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); /* 自定義貝塞爾曲線 */
  
  /* 步驟函數(shù) */
  animation-timing-function: steps(4, jump-start);
  animation-timing-function: step-start; /* 等同于 steps(1, jump-start) */
  animation-timing-function: step-end; /* 等同于 steps(1, jump-end) */
}

4. animation-delay

定義動(dòng)畫(huà)開(kāi)始前的延遲時(shí)間。

.element {
  animation-delay: 1s; /* 延遲1秒開(kāi)始 */
  animation-delay: -500ms; /* 立即開(kāi)始，但跳過(guò)前500ms的動(dòng)畫(huà) */
}

5. animation-iteration-count

設(shè)置動(dòng)畫(huà)重復(fù)播放的次數(shù)。

.element {
  animation-iteration-count: 1; /* 默認(rèn)，播放一次 */
  animation-iteration-count: 3; /* 播放三次 */
  animation-iteration-count: infinite; /* 無(wú)限循環(huán) */
  animation-iteration-count: 2.5; /* 播放兩次半 */
}

6. animation-direction

定義動(dòng)畫(huà)播放的方向。

.element {
  animation-direction: normal; /* 默認(rèn)，正向播放 */
  animation-direction: reverse; /* 反向播放 */
  animation-direction: alternate; /* 奇數(shù)次正向，偶數(shù)次反向 */
  animation-direction: alternate-reverse; /* 奇數(shù)次反向，偶數(shù)次正向 */
}

7. animation-fill-mode

定義動(dòng)畫(huà)在執(zhí)行前后如何將樣式應(yīng)用于元素。

.element {
  animation-fill-mode: none; /* 默認(rèn)，動(dòng)畫(huà)前后不應(yīng)用任何樣式 */
  animation-fill-mode: forwards; /* 動(dòng)畫(huà)結(jié)束后保持最后一幀的樣式 */
  animation-fill-mode: backwards; /* 動(dòng)畫(huà)開(kāi)始前應(yīng)用第一幀的樣式（考慮delay） */
  animation-fill-mode: both; /* 同時(shí)應(yīng)用forwards和backwards */
}

8. animation-play-state

控制動(dòng)畫(huà)的播放狀態(tài)。

.element {
  animation-play-state: running; /* 默認(rèn)，動(dòng)畫(huà)運(yùn)行 */
  animation-play-state: paused; /* 動(dòng)畫(huà)暫停 */
}

/* 通常與交互結(jié)合 */
.element:hover {
  animation-play-state: paused;
}

四、簡(jiǎn)寫(xiě)屬性

animation 簡(jiǎn)寫(xiě)

將所有動(dòng)畫(huà)屬性合并為一個(gè)屬性。

語(yǔ)法：

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

示例：

.element {
  /* 完整寫(xiě)法 */
  animation: slideIn 2s ease-in-out 1s infinite alternate both;
  
  /* 簡(jiǎn)寫(xiě)（僅必要屬性） */
  animation: slideIn 2s;
  
  /* 多個(gè)動(dòng)畫(huà) */
  animation: 
    slideIn 2s ease-out,
    fadeIn 1.5s ease-in 0.5s;
}

五、實(shí)踐示例

示例1：基本淡入效果

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in-element {
  animation: fadeIn 1s ease-in-out;
}

示例2：彈跳球效果

@keyframes bounce {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  50% {
    transform: translateY(-100px);
    animation-timing-function: ease-in;
  }
  100% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
}

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
  animation: bounce 1.5s infinite;
}

示例3：加載旋轉(zhuǎn)器

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

示例4：打字機(jī)效果

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  0%, 100% { border-color: transparent; }
  50% { border-color: black; }
}

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid;
  animation: 
    typing 3.5s steps(40, end),
    blink 0.75s step-end infinite;
}

六、性能優(yōu)化建議

1：優(yōu)先使用 transform 和 opacity

這些屬性可以由GPU加速，不會(huì)觸發(fā)重排

/* 好 - GPU加速 */
transform: translateX(100px);
opacity: 0.5;

/* 不好 - 可能觸發(fā)重排 */
left: 100px;
width: 200px;

2：使用 will-change 屬性

.animated-element {
  will-change: transform, opacity;
}

3：減少動(dòng)畫(huà)數(shù)量：避免同時(shí)過(guò)多元素動(dòng)畫(huà)

4：使用合適的 timing-function

考慮使用 cubic-bezier() 創(chuàng)建更自然的動(dòng)畫(huà)

七、瀏覽器兼容性

CSS動(dòng)畫(huà)在現(xiàn)代瀏覽器中得到廣泛支持：

Chrome 43+ (完全支持)

Firefox 16+ (完全支持)

Safari 9+ (完全支持)

Edge 12+ (完全支持)

Opera 30+ (完全支持)

對(duì)于舊版瀏覽器，可能需要添加前綴：

@-webkit-keyframes fadeIn { /* WebKit/Blink */ }
@-moz-keyframes fadeIn { /* Firefox */ }
@-o-keyframes fadeIn { /* Opera */ }
@keyframes fadeIn { /* 標(biāo)準(zhǔn) */ }

.element {
  -webkit-animation: fadeIn 2s;
  -moz-animation: fadeIn 2s;
  -o-animation: fadeIn 2s;
  animation: fadeIn 2s;
}

八、與 Transition 的區(qū)別

九、實(shí)用技巧

1. 暫停并恢復(fù)動(dòng)畫(huà)

.animated {
  animation: pulse 2s infinite;
}

.animated.paused {
  animation-play-state: paused;
}

2. 檢測(cè)動(dòng)畫(huà)結(jié)束

const element = document.querySelector('.animated');
element.addEventListener('animationend', () => {
  console.log('動(dòng)畫(huà)結(jié)束');
});

3. 創(chuàng)建進(jìn)度條

@keyframes progress {
  from { width: 0%; }
  to { width: 100%; }
}

.progress-bar {
  animation: progress 5s linear forwards;
}

總結(jié)

CSS動(dòng)畫(huà)提供了一種強(qiáng)大而靈活的方式來(lái)創(chuàng)建引人注目的視覺(jué)效果。通過(guò)合理使用@keyframes和各種動(dòng)畫(huà)屬性，您可以創(chuàng)建從簡(jiǎn)單到復(fù)雜的各種動(dòng)畫(huà)效果，而無(wú)需編寫(xiě)JavaScript代碼。記住要關(guān)注性能優(yōu)化，特別是在移動(dòng)設(shè)備上，并確保動(dòng)畫(huà)增強(qiáng)用戶體驗(yàn)而不是分散注意力。