animation

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 2015 年 9 月以來，該特性已在各大瀏覽器中可用。

* 此特性的某些部分可能存在不同級別的支援。

animation 是一個簡寫 CSS 屬性，用於應用樣式之間的動畫。它是 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state 和 animation-timeline 的簡寫屬性。

試一試

animation: 3s ease-in 1s infinite reverse both running slide-in;

animation: 3s linear 1s infinite running slide-in;

animation: 3s linear 1s infinite alternate slide-in;

animation: 0.5s linear 1s infinite alternate slide-in;

<section class="flex-column" id="default-example">
  <div id="example-element"></div>
</section>

#example-element {
  background-color: #1766aa;
  margin: 20px;
  border: 5px solid #333333;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

@keyframes slide-in {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}

語法

css

/* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slide-in;

/* @keyframes duration | easing-function | delay | name */
animation: 3s linear 1s slide-in;

/* two animations */
animation:
  3s linear slide-in,
  3s ease-out 5s slide-out;

animation 屬性可以指定一個或多個動畫，以逗號分隔。

每個單獨的動畫指定為

零、一或兩個 <time> 值
零個或一個以下值
一個可選的動畫名稱，可以是 none、<custom-ident> 或 <string>

備註： animation-timeline、animation-range-start 和 animation-range-end 目前不包含在此列表中，因為當前的實現僅用於重置。這意味著包含 animation 會將先前宣告的 animation-timeline 值重置為 auto，將先前宣告的 animation-range-start 和 animation-range-end 值重置為 normal，但這些屬性不能透過 animation 設定。在建立CSS 滾動驅動動畫時，你需要在宣告任何 animation 簡寫屬性之後再宣告這些屬性，才能使其生效。

值

<single-easing-function>: 確定過渡的型別。該值必須是 <easing-function> 中可用的值之一。
<single-animation-iteration-count>: 動畫播放的次數。該值必須是 animation-iteration-count 中可用的值之一。
<single-animation-direction>: 動畫播放的方向。該值必須是 animation-direction 中可用的值之一。
<single-animation-fill-mode>: 確定在動畫執行前後應如何將樣式應用於其目標。該值必須是 animation-fill-mode 中可用的值之一。
<single-animation-play-state>: 確定動畫是正在播放還是暫停。該值必須是 animation-play-state 中可用的值之一。

描述

每個動畫定義中時間值的順序很重要：第一個可以解析為 <time> 的值會賦給 animation-duration，第二個會賦給 animation-delay。

每個動畫定義中其他值的順序對於區分 animation-name 值和其他值也很重要。如果 animation 簡寫中的某個值可以解析為除 animation-name 之外的某個動畫屬性值，那麼該值將首先應用於該屬性，而不是 animation-name。因此，推薦的做法是在使用 animation 簡寫時，將 animation-name 的值指定為值列表中的最後一個值；即使在使用 animation 簡寫指定多個以逗號分隔的動畫時，也應如此。

雖然必須設定動畫名稱才能應用動畫，但 animation 簡寫的所有值都是可選的，並預設為每個完整 animation 元件的初始值。animation-name 的初始值是 none，這意味著如果在 animation 簡寫屬性中未宣告 animation-name 值，則不會對任何屬性應用動畫。

當 animation-duration 值在 animation 簡寫屬性中被省略時，該屬性的值預設為 0s。在這種情況下，動畫仍然會發生（會觸發 animationStart 和 animationEnd 事件），但不會有任何可見的動畫效果。

在使用 animation-fill-mode 的 forwards 值時，動畫屬性的行為就像它們被包含在一個已設定的 will-change 屬性值中一樣。如果在動畫期間建立了新的堆疊上下文，目標元素在動畫結束後會保留該堆疊上下文。

無障礙

閃爍和閃光的動畫可能對患有注意力缺陷多動障礙（ADHD）等認知問題的人群造成困擾。此外，某些型別的運動可能會引發前庭障礙、癲癇、偏頭痛和暗點敏感性。

考慮提供一種暫停或停用動畫的機制，並使用減弱動態效果媒體查詢為那些偏好減少動畫體驗的使用者建立一種補充體驗。

正式定義

初始值	作為簡寫中的每個屬性 `animation-name`: `none` `animation-duration`: `0s` `animation-timing-function`: `ease` `animation-delay`: `0s` `animation-iteration-count`: `1` `animation-direction`: `normal` `animation-fill-mode`: `none` `animation-play-state`: `running` `animation-timeline`: `auto`
應用於	所有元素
繼承性	否
計算值	作為簡寫中的每個屬性 `animation-name`: as specified `animation-duration`: as specified `animation-timing-function`: as specified `animation-delay`: as specified `animation-direction`: as specified `animation-iteration-count`: as specified `animation-fill-mode`: as specified `animation-play-state`: as specified `animation-timeline`: 一個列表，每個專案要麼是一個區分大小寫的 CSS 識別符號，要麼是關鍵字 `none`、`auto`
動畫型別	不可動畫化

正式語法

animation = 
  <single-animation>#  

<single-animation> = 
  <'animation-duration'>              ||
  <easing-function>                   ||
  <'animation-delay'>                 ||
  <single-animation-iteration-count>  ||
  <single-animation-direction>        ||
  <single-animation-fill-mode>        ||
  <single-animation-play-state>       ||
  [ none | <keyframes-name> ]         ||
  <single-animation-timeline>         

<animation-duration> = 
  [ auto | <time [0s,∞]> ]#  

<easing-function> = 
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>          

<animation-delay> = 
  <time>#  

<single-animation-iteration-count> = 
  infinite        |
  <number [0,∞]>  

<single-animation-direction> = 
  normal             |
  reverse            |
  alternate          |
  alternate-reverse  

<single-animation-fill-mode> = 
  none       |
  forwards   |
  backwards  |
  both       

<single-animation-play-state> = 
  running  |
  paused   

<keyframes-name> = 
  <custom-ident>  |
  <string>        

<single-animation-timeline> = 
  auto            |
  none            |
  <dashed-ident>  |
  <scroll()>      |
  <view()>        

<linear-easing-function> = 
  linear      |
  <linear()>  

<cubic-bezier-easing-function> = 
  ease              |
  ease-in           |
  ease-out          |
  ease-in-out       |
  <cubic-bezier()>  

<step-easing-function> = 
  step-start  |
  step-end    |
  <steps()>   

<scroll()> = 
  scroll( [ <scroller> || <axis> ]? )  

<view()> = 
  view( [ <axis> || <'view-timeline-inset'> ]? )  

<linear()> = 
  linear( [ <number> && <percentage>{0,2} ]# )  

<cubic-bezier()> = 
  cubic-bezier( [ <number [0,1]> , <number> ]#{2} )  

<steps()> = 
  steps( <integer> , <step-position>? )  

<scroller> = 
  root     |
  nearest  |
  self     

<axis> = 
  block   |
  inline  |
  x       |
  y       

<view-timeline-inset> = 
  [ [ auto | <length-percentage> ]{1,2} ]#  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end         

<length-percentage> = 
  <length>      |
  <percentage>

示例

注意： 不鼓勵對 CSS 盒模型屬性進行動畫處理。對任何盒模型屬性進行動畫處理都會佔用大量 CPU；請考慮改用 transform 屬性進行動畫處理。

日出

在這裡，我們在淡藍色的天空中為一個黃色的太陽製作動畫。太陽昇到視口的中心，然後落下消失。

html

<div class="sun"></div>

css

:root {
  overflow: hidden; /* hides any part of the sun below the horizon */
  background-color: lightblue;
  display: flex;
  justify-content: center; /* centers the sun in the background */
}

.sun {
  background-color: yellow;
  border-radius: 50%; /* creates a circular background */
  height: 100vh; /* makes the sun the size of the viewport */
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate sun-rise;
}

@keyframes sun-rise {
  from {
    /* pushes the sun down past the viewport */
    transform: translateY(110vh);
  }
  to {
    /* returns the sun to its default position */
    transform: translateY(0);
  }
}

為多個屬性新增動畫

在前一個例子的太陽動畫基礎上，我們添加了第二個動畫，在太陽昇起和落下時改變其顏色。當太陽在地平線以下時，它呈深紅色，當它到達頂部時，變為亮橙色。

html

<div class="sun"></div>

css

:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate animating-multiple-properties;
}

/* it is possible to animate multiple properties in a single animation */
@keyframes animating-multiple-properties {
  from {
    transform: translateY(110vh);
    background-color: red;
    filter: brightness(75%);
  }
  to {
    transform: translateY(0);
    background-color: orange;
    /* unset properties i.e. 'filter' will revert to default values */
  }
}

應用多個動畫

這是一個在淡藍色背景下升起和落下的太陽。太陽逐漸旋轉，呈現出彩虹般的顏色。太陽的位置和顏色的時間是獨立的。

html

<div class="sun"></div>

css

:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  /* multiple animations are separated by commas, each animation's parameters are set independently */
  animation:
    4s linear 0s infinite alternate rise,
    24s linear 0s infinite psychedelic;
}

@keyframes rise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes psychedelic {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

層疊多個動畫

這是一個在淡藍色背景上的黃色太陽。太陽在視口的左右兩側之間彈跳。儘管定義了上升動畫，太陽仍然保留在視口中。上升動畫的 transform 屬性被彈跳動畫“覆蓋”了。

html

<div class="sun"></div>

css

:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  /*
    animations declared later in the cascade will override the
    properties of previously declared animations
  */
  /* bounce 'overwrites' the transform set by rise, hence the sun only moves horizontally */
  animation:
    4s linear 0s infinite alternate rise,
    4s linear 0s infinite alternate bounce;
}

@keyframes rise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes bounce {
  from {
    transform: translateX(-50vw);
  }
  to {
    transform: translateX(50vw);
  }
}

更多示例請參閱使用 CSS 動畫。

規範

規範
CSS 動畫級別 1 # animation

瀏覽器相容性

另見

使用 CSS 動畫
JavaScript AnimationEvent API

幫助改進 MDN

瞭解如何貢獻

此頁面的最後修改時間是 ⁨2025 年 8 月 13 日⁩，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題