就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. Web API
  3. Element
  4. Element.animate()

在此页

元素 接口的 animate() method is a shortcut method which creates a new 动画 , applies it to the element, then plays the animation. It returns the created 动画 对象实例。

Elements can have multiple animations applied to them. You can get a list of the animations that affect an element by calling Element.getAnimations() .

句法 

var animation = element.animate(keyframes, options);

参数

keyframes

Either an array of keyframe objects, or a keyframe object whose property are arrays of values to iterate over. See 关键帧格式 了解更多细节。

选项
Either an integer representing the animation's duration (in milliseconds), or an Object containing one or more timing properties:
id 可选
A property unique to animate() ： DOMString with which to reference the animation.
delay 可选

The number of milliseconds to delay the start of the animation. Defaults to 0.

direction 可选
Whether the animation runs forwards ( normal ), backwards ( reverse ), switches direction after each iteration ( alternate ), or runs backwards and switches direction after each iteration ( alternate-reverse ). Defaults to "normal" .
duration 可选

The number of milliseconds each iteration of the animation takes to complete. Defaults to 0. Although this is technically optional, keep in mind that your animation will not run if this value is 0.

easing 可选
The rate of the animation's change over time. Accepts the pre-defined values "linear" , "ease" , "ease-in" , "ease-out" ，和 "ease-in-out" , or a custom "cubic-bezier" value like "cubic-bezier(0.42, 0, 0.58, 1)" . Defaults to "linear" .
endDelay 可选

The number of milliseconds to delay after the end of an animation. This is primarily of use when sequencing animations based on the end time of another animation. Defaults to 0.

fill 可选
Dictates whether the animation's effects should be reflected by the element(s) prior to playing ( "backwards" ), retained after the animation has completed playing ( "forwards" )，或 both . Defaults to "none" .
iterationStart 可选

Describes at what point in the iteration the animation should start. 0.5 would indicate starting halfway through the first iteration for example, and with this value set, an animation with 2 iterations would end halfway through a third iteration. Defaults to 0.0.

iterations 可选
The number of times the animation should repeat. Defaults to 1 , and can also take a value of Infinity to make it repeat for as long as the element exists.

You can also include a composite operation or iteration composite operation in your options list:

composite 可选
Determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. Defaults to replace .
  • add dictates an additive effect, where each successive iteration builds on the last. For instance with transform ， translateX(-200px) would not override an earlier rotate(20deg) value but result in translateX(-200px) rotate(20deg) .
  • accumulate is similar but a little smarter: blur(2) and blur(5) become blur(7) , not blur(2) blur(5) .
  • replace overwrites the previous value with the new one.
iterationComposite 可选
Determines how values build from iteration to iteration in this animation. Can be set to accumulate or replace (see above). Defaults to replace .

返回值

返回 动画 .

范例

In the demo Down the Rabbit Hole (with the Web Animation API) , we use the convenient animate() method to immediately create and play an animation on the #tunnel element to make it flow upwards, infinitely. Notice the array of objects passed as keyframes and also the timing options block. 

document.getElementById("tunnel").animate([
  // keyframes
  { transform: 'translateY(0px)' },
  { transform: 'translateY(-300px)' }
], {
  // timing options
  duration: 1000,
  iterations: Infinity
});

Implicit to/from keyframes

In newer browser versions, you are able to set a beginning or end state for an animation only (i.e. a single keyframe), and the browser will infer the other end of the animation if it is able to. For example, consider this simple animation — the Keyframe object looks like so: 

let rotate360 = [
  { transform: 'rotate(360deg)' }
];

We have only specified the end state of the animation, and the beginning state is implied.

规范

规范 状态 注释
Web Animations Level 2
The definition of 'KeyframeAnimationOptions.iterationComposite' in that specification. 		草案 添加 iterationComposite 选项。
Web 动画
The definition of 'animate()' 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
animate Chrome 36 Edge 79 Firefox 48 IE No Opera 23 Safari Yes Disabled
Yes Disabled
Disabled This feature is behind the Web 动画 preference and the CSS Animations via Web Animations preference.
WebView Android 37 Chrome Android 36 Firefox Android 48 Opera Android 24 Safari iOS 13.4 Samsung Internet Android 3.0
composite option Chrome 79 Disabled
79 Disabled
Disabled From version 79: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 79 Disabled
79 Disabled
Disabled From version 79: this feature is behind the Experimental Web Platform Features preference.
Firefox 63 Disabled
63 Disabled
Disabled From version 63: this feature is behind the dom.animations-api.compositing.enabled preference. To change preferences in Firefox, visit about:config.
不支持 53 — 63 Disabled
Disabled From version 53 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference. To change preferences in Firefox, visit about:config.
IE No Opera 66 Disabled
66 Disabled
Disabled From version 66: this feature is behind the Experimental Web Platform Features preference.
Safari No WebView Android No Chrome Android 79 Disabled
79 Disabled
Disabled From version 79: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 63 Disabled
63 Disabled
Disabled From version 63: this feature is behind the dom.animations-api.compositing.enabled preference. To change preferences in Firefox, visit about:config.
不支持 53 — 63 Disabled
Disabled From version 53 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android No Safari iOS No Samsung Internet Android No
id option Chrome 50 Edge 79 Firefox 48 IE No Opera 37 Safari No WebView Android 50 Chrome Android 50 Firefox Android 48 Opera Android 37 Safari iOS No Samsung Internet Android 5.0
Implicit to/from keyframes are supported Chrome No
不支持 No
Currently Chrome Canary only
Edge No Firefox 75 IE No Opera No Safari 部分支持 13.1
部分支持 13.1
Implementation seems somewhat buggy. More information will follow when available.
WebView Android No Chrome Android No
不支持 No
Currently Chrome Canary only
Firefox Android No Opera Android No Safari iOS 部分支持 13.4
部分支持 13.4
Implementation seems somewhat buggy. More information will follow when available.
Samsung Internet Android No
iterationComposite option Chrome No Edge No Firefox 63 Disabled
63 Disabled
Disabled From version 63: this feature is behind the dom.animations-api.compositing.enabled preference. To change preferences in Firefox, visit about:config.
不支持 51 — 63 Disabled
Disabled From version 51 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference. To change preferences in Firefox, visit about:config.
IE No Opera No Safari No WebView Android No Chrome Android No Firefox Android 63 Disabled
63 Disabled
Disabled From version 63: this feature is behind the dom.animations-api.compositing.enabled preference. To change preferences in Firefox, visit about:config.
不支持 51 — 63 Disabled
Disabled From version 51 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android No Safari iOS No Samsung Internet Android No
pseudoElement option Chrome 部分支持 81 Disabled
部分支持 81 Disabled
A valid animation object is returned but the targeted pseudoelement is not visually animated.
Disabled From version 81: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 部分支持 81 Disabled
部分支持 81 Disabled
A valid animation object is returned but the targeted pseudoelement is not visually animated.
Disabled From version 81: this feature is behind the Experimental Web Platform Features preference.
Firefox 75 IE No Opera 部分支持 68 Disabled
部分支持 68 Disabled
A valid animation object is returned but the targeted pseudoelement is not visually animated.
Disabled From version 68: this feature is behind the Experimental Web Platform Features preference.
Safari No WebView Android No Chrome Android 部分支持 81 Disabled
部分支持 81 Disabled
A valid animation object is returned but the targeted pseudoelement is not visually animated.
Disabled From version 81: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android No Opera Android No Safari iOS No Samsung Internet Android No

图例

完整支持

完整支持

部分支持

部分支持

不支持

不支持

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

另请参阅

元数据

  • 最后修改：
  1. Web 动画 API
  2. 元素
  3. 特性
    1. accessKey
    2. 属性
    3. childElementCount
    4. children
    5. classList
    6. className
    7. clientHeight
    8. clientLeft
    9. clientTop
    10. clientWidth
    11. currentStyle
    12. firstElementChild
    13. id
    14. innerHTML
    15. lastElementChild
    16. localName
    17. 名称
    18. namespaceURI
    19. nextElementSibling
    20. onfullscreenchange
    21. onfullscreenerror
    22. openOrClosedShadowRoot
    23. outerHTML
    24. part
    25. prefix
    26. previousElementSibling
    27. runtimeStyle
    28. scrollHeight
    29. scrollLeft
    30. scrollLeftMax
    31. scrollTop
    32. scrollTopMax
    33. scrollWidth
    34. shadowRoot
    35. slot
    36. tabStop
    37. tagName
  4. 方法
    1. after()
    2. animate()
    3. append()
    4. attachShadow()
    5. before()
    6. closest()
    7. computedStyleMap()
    8. createShadowRoot()
    9. getAnimations()
    10. getAttribute()
    11. getAttributeNames()
    12. getAttributeNode()
    13. getAttributeNodeNS()
    14. getAttributeNS()
    15. getBoundingClientRect()
    16. getClientRects()
    17. getElementsByClassName()
    18. getElementsByTagName()
    19. getElementsByTagNameNS()
    20. hasAttribute()
    21. hasAttributeNS()
    22. hasAttributes()
    23. hasPointerCapture()
    24. insertAdjacentElement()
    25. insertAdjacentHTML()
    26. insertAdjacentText()
    27. matches()
    28. msZoomTo()
    29. prepend()
    30. querySelector()
    31. querySelector()
    32. querySelectorAll()
    33. querySelectorAll()
    34. releasePointerCapture()
    35. remove()
    36. removeAttribute()
    37. removeAttributeNode()
    38. removeAttributeNS()
    39. replaceChildren()
    40. replaceWith()
    41. requestFullscreen()
    42. requestPointerLock()
    43. scroll()
    44. scrollBy()
    45. scrollIntoView()
    46. scrollIntoViewIfNeeded()
    47. scrollTo()
    48. setAttribute()
    49. setAttributeNode()
    50. setAttributeNodeNS()
    51. setAttributeNS()
    52. setCapture()
    53. setPointerCapture()
    54. toggleAttribute()
  5. 事件
    1. afterscriptexecute
    2. auxclick
    3. blur
    4. click
    5. compositionend
    6. compositionstart
    7. compositionupdate
    8. contextmenu
    9. copy
    10. cut
    11. dblclick
    12. DOMActivate
    13. DOMMouseScroll
    14. error
    15. focus
    16. focusin
    17. focusout
    18. fullscreenchange
    19. fullscreenerror
    20. gesturechange
    21. gestureend
    22. gesturestart
    23. keydown
    24. keypress
    25. keyup
    26. mousedown
    27. mouseenter
    28. mouseleave
    29. mousemove
    30. mouseout
    31. mouseover
    32. mouseup
    33. mousewheel
    34. MozMousePixelScroll
    35. msContentZoom
    36. MSGestureChange
    37. MSGestureEnd
    38. MSGestureHold
    39. MSGestureStart
    40. MSGestureTap
    41. MSInertiaStart
    42. MSManipulationStateChanged
    43. overflow
    44. paste
    45. scroll
    46. select
    47. show
    48. touchcancel
    49. touchend
    50. touchmove
    51. touchstart
    52. underflow
    53. webkitmouseforcechanged
    54. webkitmouseforcedown
    55. webkitmouseforceup
    56. webkitmouseforcewillbegin
    57. wheel
  6. 继承：
    1. 节点
    2. EventTarget
  7. Web 动画相关页面
    1. 动画
    2. AnimationEffect
    3. AnimationEvent
    4. AnimationPlaybackEvent
    5. AnimationTimeline
    6. Document.getAnimations()
    7. Document.timeline
    8. DocumentTimeline
    9. EffectTiming
    10. Element.animate()
    11. KeyframeEffect

版权所有  © 2014-2026 乐数软件    

工业和信息化部： 粤ICP备14079481号-1