animation

在此页

组成特性
句法
可访问性关注
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

animation 简写 CSS property applies an animation between styles. It is a shorthand for animation-name , animation-duration , animation-timing-function , animation-delay , animation-iteration-count , animation-direction , animation-fill-mode ，和 animation-play-state .

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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

<div class="grid">
  <div class="col">
    <div class="note">
      Given the following animation:
      <pre>@keyframes slidein {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}</pre>
    </div>
    <div class="row">
      <div class="cell">
        <button class="play" title="PLAY"></button>
      </div>
      <div class="cell flx">
        <div class="overlay">animation: 3s ease-in 1s 2 reverse both paused slidein;</div>
        <div class="animation a1"></div>
      </div>
    </div>
    <div class="row">
      <div class="cell">
        <button class="pause" title="PAUSE"></button>
      </div>
      <div class="cell flx">
        <div class="overlay">animation: 3s linear 1s slidein;</div>
        <div class="animation a2"></div>
      </div>
    </div>
    <div class="row">
      <div class="cell">
        <button class="pause" title="PAUSE"></button>
      </div>
      <div class="cell flx">
        <div class="overlay">animation: 3s slidein;</div>
        <div class="animation a3"></div>
      </div>
    </div>
  </div>
</div>

html,body {
  height: 100%;
  box-sizing: border-box;
}
pre { margin-bottom: 0; }
svg { width: 1.5em; height: 1.5em; }
button {
  width: 27px;
  height: 27px;
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 3px;
  cursor: pointer;
}
button.play {
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#play');
}
button.pause {
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#pause');
}
button.restart {
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#restart');
}
.grid {
  width: 100%;
  height: 100%;
  display: flex;
  background: #EEE;
  font: 1em monospace;
}
.row {
  display: flex;
  flex: 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.col {
  display: flex;
  flex: 1 auto;
  flex-direction: column;
}
.cell {
  box-sizing: border-box;
  margin: .5em;
  padding: 0;
  background-color: #FFF;
  overflow: hidden;
  text-align: left;
}
.flx {
  flex: 1 0;
}
.note {
  background: #fff3d4;
  padding: 1em;
  margin: .5em;
  font: .8em sans-serif;
  text-align: left;
  flex: none;
}
.overlay { padding: .5em; }
@keyframes slidein {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.a1 { animation: 3s ease-in 1s 2 reverse both paused slidein; }
.a2 { animation: 3s linear 1s slidein; }
.a3 { animation: 3s slidein; }
.animation {
  background: #3F87A6;
  width: 100%;
  height: calc(100% - 1.5em);
  transform-origin: left center;
}

window.addEventListener('load', function () {
  var ANIMATION = Array.from(document.querySelectorAll('.animation'));
  var BUTTON    = Array.from(document.querySelectorAll('button'));
  function toggleButton (btn, type) {
    btn.classList.remove('play', 'pause', 'restart');
    btn.classList.add(type);
    btn.title = type.toUpperCase(type);
  }
  function playPause (i) {
    var btn  = BUTTON[i];
    var anim = ANIMATION[i];
    if (btn.classList.contains('play')) {
      anim.style.animationPlayState = 'running';
      toggleButton(btn, 'pause');
    } else if (btn.classList.contains('pause')) {
      anim.style.animationPlayState = 'paused';
      toggleButton(btn, 'play');
    } else {
      anim.classList.remove('a' + (i + 1));
      setTimeout(function () {
        toggleButton(btn, i === 0 ? 'play' : 'pause');
        anim.style.animationPlayState = '';
        anim.classList.add('a' + (i + 1));
      }, 100)
    }
  }
  ANIMATION.forEach(function (node, index) {
    node.addEventListener('animationstart', function () { toggleButton(BUTTON[index], 'pause');   });
    node.addEventListener('animationend',   function () { toggleButton(BUTTON[index], 'restart'); });
  });
  BUTTON.forEach(function (btn, index) {
    btn.addEventListener('click', function () { playPause(index); });
  });
})

A description of which properties are animatable is available; it's worth noting that this description is also valid for CSS 过渡 .

组成特性

此特性是下列 CSS 特性的简写：

句法

animation property is specified as one or more single animations, separated by commas.

Each individual animation is specified as:

zero or one occurrences of the following values:
an optional name for the animation, which may be none ， <custom-ident> ，或 <string>
zero, one, or two <time> 值

The order of values within each animation definition is important: the first value that can be parsed as a <time> is assigned to the animation-duration , and the second one is assigned to animation-delay .

The order within each animation definition is also important for distinguishing animation-name values from other keywords. When parsed, keywords that are valid for properties other than animation-name , and whose values were not found earlier in the shorthand, must be accepted for those properties rather than for animation-name . Furthermore, when serialized, default values of other properties must be output in at least the cases necessary to distinguish an animation-name that could be a value of another property, and may be output in additional cases.

值

<single-animation-iteration-count>: The number of times the animation is played. The value must be one of those available in animation-iteration-count .
<single-animation-direction>: The direction in which the animation is played. The value must be one of those available in animation-direction .
<single-animation-fill-mode>: Determines how styles should be applied to the animation's target before and after its execution. The value must be one of those available in animation-fill-mode .
<single-animation-play-state>: Determines whether the animation is playing or not. The value must be one of those available in animation-play-state .

可访问性关注

Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.

Consider providing a mechanism for pausing or disabling animation, as well as using the Reduced Motion Media Query to create a complimentary experience for users who have expressed a preference for no animated experiences.

形式定义

初始值	as each of the properties of the shorthand: `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`
适用于	所有元素， `::before` and `::after` pseudo-elements
继承	no
计算值	as each of the properties of the shorthand: `animation-name` ：如指定 `animation-duration` ：如指定 `animation-timing-function` ：如指定 `animation-delay` ：如指定 `animation-direction` ：如指定 `animation-iteration-count` ：如指定 `animation-fill-mode` ：如指定 `animation-play-state` ：如指定
动画类型	discrete

形式句法

<single-animation>#where 
<single-animation> = <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]
where 
<timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>
<single-animation-iteration-count> = infinite | <number>
<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>
where 
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)
where 
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end

范例

Cylon Eye

<div class="view_port">
  <div class="polling_message">
    Listening for dispatches
  </div>
  <div class="cylon_eye"></div>
</div>

.polling_message {
  color: white;
  float: left;
  margin-right: 2%;
}
.view_port {
  background-color: black;
  height: 25px;
  width: 100%;
  overflow: hidden;
}
.cylon_eye {
  background-color: red;
  background-image: linear-gradient(to right,
      rgba(0, 0, 0, .9) 25%,
      rgba(0, 0, 0, .1) 50%,
      rgba(0, 0, 0, .9) 75%);
  color: white;
  height: 100%;
  width: 20%;
  -webkit-animation: 4s linear 0s infinite alternate move_eye;
          animation: 4s linear 0s infinite alternate move_eye;
}
@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
        @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }

见使用 CSS 动画 for additional examples.

规范

规范	状态	注释
CSS 动画 The definition of 'animation' in that specification.	工作草案	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`animation`	Chrome 完整支持 43	Edge 完整支持 12	Firefox 完整支持 16 完整支持 16 Prefixed Implemented with the vendor prefix: -webkit- 完整支持 Prefixed Implemented with the vendor prefix: -webkit- Disabled `layout.css.prefixes.webkit` preference (needs to be set to `true` ). To change preferences in Firefox, visit about:config. 完整支持 5 Prefixed Prefixed Implemented with the vendor prefix: -moz-	IE 完整支持 10	Opera 完整支持 30 完整支持 30 Prefixed Implemented with the vendor prefix: -webkit- 不支持 12.1 — 15 不支持 12 — 15 Prefixed Prefixed Implemented with the vendor prefix: -o-	Safari 完整支持 9	WebView Android 完整支持 43 完整支持 43 完整支持 2 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -webkit- 注意事项 `animation-fill-mode` property is not supported in Android browsers below 2.3.	Chrome Android 完整支持 43	Firefox Android 完整支持 16 完整支持 16 Prefixed Implemented with the vendor prefix: -webkit- 完整支持 Prefixed Implemented with the vendor prefix: -webkit- Disabled `layout.css.prefixes.webkit` preference (needs to be set to `true` ). To change preferences in Firefox, visit about:config. 完整支持 5 Prefixed Prefixed Implemented with the vendor prefix: -moz-	Opera Android 完整支持 30 完整支持 30 Prefixed Implemented with the vendor prefix: -webkit- 不支持 12.1 — 14 不支持 12 — 14 Prefixed Prefixed Implemented with the vendor prefix: -o-	Safari iOS 完整支持 9	Samsung Internet Android 完整支持 4.0

图例

完整支持
见实现注意事项。
用户必须明确启用此特征。
要求使用供应商前缀或不同名称。

Quantum CSS notes

Gecko has a bug whereby when you animate an offscreen element onscreen but specify a delay, Gecko does not repaint on some platforms, e.g. Windows ( bug 1383239 ). This has been fixed in Firefox's new parallel CSS engine (also known as Quantum CSS or Stylo , planned for release in Firefox 57).
Another Gecko bug means that <details> elements can't be made open by default using the open attribute if they have an animation active on them ( bug 1382124 ). Quantum CSS fixes this.
A further bug means that animations using em units are not affected by changes to the font-size on the animated element's parent, whereas they should be ( bug 1254424 ). Quantum CSS fixes this.

另请参阅

使用 CSS 动画
JavaScript AnimationEvent API

元数据

最后修改： Sep 15, 2020

在此页