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 上查看此页面 • 报告此内容的问题