簡單的CSS動畫教程針對初學者

CSS動畫的關鍵在於掌握@keyframes和animation屬性的使用。 1. @keyframes用於定義動畫關鍵幀，通過from/to或百分比設定動畫不同階段的狀態；2. animation屬性將動畫應用到元素上，包括名稱、持續時間、緩動函數、延遲和播放次數等設置；3. 可通過簡寫屬性簡化代碼，並利用animation-delay實現多個元素錯開播放的效果；4. 注意瀏覽器兼容性、性能優化、觸發方式及保持動畫簡潔。掌握這些核心要點，就能輕鬆做出流暢且美觀的CSS動畫。

CSS動畫其實沒那麼難，尤其是對新手來說。只要你掌握了基本結構和幾個關鍵屬性，就能做出流暢又好看的效果。這篇文章會從最簡單的例子講起，幫你理解怎麼用CSS做動畫。

1. 先搞清楚@keyframes是什麼

想做動畫，首先要學會定義關鍵幀。 @keyframes就是用來告訴瀏覽器動畫在不同階段應該是什麼樣的。

比如你想做一個小方塊從左往右動的動畫，你可以這樣寫：

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

你也可以用百分比來控制更細的節奏，比如：

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

記住： @keyframes只是定義了“動畫長什麼樣”，但還沒應用到任何元素上。

2. 把動畫加到元素上

定義好動畫之後，下一步就是把它用到某個元素上。這就需要用到animation屬性或者它的子屬性。

比如你想讓一個div 動起來，可以這樣寫：

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

這些屬性分別控制：

• 動畫名字（要跟@keyframes的名字一致）
• 持續時間
• 緩動函數（速度變化方式）
• 延遲多久開始
• 動畫播放幾次（infinite 表示無限循環）

當然你也可以簡寫成一行：

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

3. 簡單實用的例子：加載動畫

新手可以從一個常見的加載動畫練手—— 三個點依次出現再消失的那種。

HTML 結構大概是這樣：

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

然後CSS 動畫就可以這樣寫：

 @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;
}

這個例子的關鍵在於利用了每個點不同的animation-delay ，實現了錯開的效果。

4. 注意幾個容易忽略的地方

• 瀏覽器兼容性：大多數現代瀏覽器都支持animation ，但如果要兼容舊版本IE，可能需要加-webkit-或其他前綴。
• 性能問題：不要給太多元素加複雜動畫，會影響頁面性能。
• 觸發方式：默認動畫是頁面加載就執行的。如果你希望點擊或懸停時才動，可以用:hover或JS 控制。
• 保持簡潔：剛開始別太追求復雜效果，先掌握基本結構更重要。

基本上就這些。 CSS 動畫看起來有點多屬性，但只要記住@keyframes定義動作、 animation控製播放，配合一些常用屬性，就能輕鬆做出好看的動畫了。

以上是簡單的CSS動畫教程針對初學者的詳細內容。更多資訊請關注PHP中文網其他相關文章！