CSS動(dòng)畫的關(guān)鍵在于掌握@keyframes和animation屬性的使用。1. @keyframes用于定義動(dòng)畫關(guān)鍵幀，通過(guò)from/to或百分比設(shè)定動(dòng)畫不同階段的狀態(tài)；2. animation屬性將動(dòng)畫應(yīng)用到元素上，包括名稱、持續(xù)時(shí)間、緩動(dòng)函數(shù)、延遲和播放次數(shù)等設(shè)置；3. 可通過(guò)簡(jiǎn)寫屬性簡(jiǎn)化代碼，并利用animation-delay實(shí)現(xiàn)多個(gè)元素錯(cuò)開播放的效果；4. 注意瀏覽器兼容性、性能優(yōu)化、觸發(fā)方式及保持動(dòng)畫簡(jiǎn)潔。掌握這些核心要點(diǎn)，就能輕松做出流暢且美觀的CSS動(dòng)畫。

CSS動(dòng)畫其實(shí)沒那么難，尤其是對(duì)新手來(lái)說(shuō)。只要你掌握了基本結(jié)構(gòu)和幾個(gè)關(guān)鍵屬性，就能做出流暢又好看的效果。這篇文章會(huì)從最簡(jiǎn)單的例子講起，幫你理解怎么用CSS做動(dòng)畫。

1. 先搞清楚 @keyframes 是什么

想做動(dòng)畫，首先要學(xué)會(huì)定義關(guān)鍵幀。@keyframes 就是用來(lái)告訴瀏覽器動(dòng)畫在不同階段應(yīng)該是什么樣的。

比如你想做一個(gè)小方塊從左往右動(dòng)的動(dòng)畫，你可以這樣寫：

@keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

你也可以用百分比來(lái)控制更細(xì)的節(jié)奏，比如：

@keyframes fadeIn {
  0%   { opacity: 0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1; }
}

記?。?code>@keyframes 只是定義了“動(dòng)畫長(zhǎng)什么樣”，但還沒應(yīng)用到任何元素上。

2. 把動(dòng)畫加到元素上

定義好動(dòng)畫之后，下一步就是把它用到某個(gè)元素上。這就需要用到 animation 屬性或者它的子屬性。

比如你想讓一個(gè) div 動(dòng)起來(lái)，可以這樣寫：

.box {
  animation-name: move;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
}

這些屬性分別控制：

• 動(dòng)畫名字（要跟 @keyframes 的名字一致）
• 持續(xù)時(shí)間
• 緩動(dòng)函數(shù)（速度變化方式）
• 延遲多久開始
• 動(dòng)畫播放幾次（infinite 表示無(wú)限循環(huán)）

當(dāng)然你也可以簡(jiǎn)寫成一行：

animation: move 2s ease-in-out 0.5s infinite;

3. 簡(jiǎn)單實(shí)用的例子：加載動(dòng)畫

新手可以從一個(gè)常見的加載動(dòng)畫練手 —— 三個(gè)點(diǎn)依次出現(xiàn)再消失的那種。

HTML 結(jié)構(gòu)大概是這樣：

<div class="loader">
  <span>.</span>
  <span>.</span>
  <span>.</span>
</div>

然后 CSS 動(dòng)畫就可以這樣寫：

@keyframes blink {
  0%, 80%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

.loader span {
  display: inline-block;
  animation: blink 1.4s infinite ease-in-out both;
}

.loader span:nth-child(2) {
  animation-delay: 0.2s;
}

.loader span:nth-child(3) {
  animation-delay: 0.4s;
}

這個(gè)例子的關(guān)鍵在于利用了每個(gè)點(diǎn)不同的 animation-delay，實(shí)現(xiàn)了錯(cuò)開的效果。

4. 注意幾個(gè)容易忽略的地方

• 瀏覽器兼容性：大多數(shù)現(xiàn)代瀏覽器都支持 animation，但如果要兼容舊版本 IE，可能需要加 -webkit- 或其他前綴。
• 性能問(wèn)題：不要給太多元素加復(fù)雜動(dòng)畫，會(huì)影響頁(yè)面性能。
• 觸發(fā)方式：默認(rèn)動(dòng)畫是頁(yè)面加載就執(zhí)行的。如果你希望點(diǎn)擊或懸停時(shí)才動(dòng)，可以用 :hover 或 JS 控制。
• 保持簡(jiǎn)潔：剛開始別太追求復(fù)雜效果，先掌握基本結(jié)構(gòu)更重要。

基本上就這些。CSS 動(dòng)畫看起來(lái)有點(diǎn)多屬性，但只要記住 @keyframes 定義動(dòng)作、animation 控制播放，配合一些常用屬性，就能輕松做出好看的動(dòng)畫了。

以上是簡(jiǎn)單的CSS動(dòng)畫教程針對(duì)初學(xué)者的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！