在此页

• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

animationstart event is fired when a CSS Animation has started. If there is an animation-delay , this event will fire once the delay period has expired. A negative delay will cause the event to fire with an elapsedTime equal to the absolute value of the delay (and, correspondingly, the animation will begin playing at that time index into the sequence).

冒泡	Yes
可取消	No
接口	AnimationEvent
事件处理程序特性	onanimationstart

范例

This listens for the animationstart event and logs a message when it is fired:

const animated = document.querySelector('.animated');
animated.addEventListener('animationstart', () => {
  console.log('Animation started');
});
					

The same, but using onanimationstart :

const animated = document.querySelector('.animated');
animated.onanimationstart = () => {
  console.log('Animation started');
};
					

实时范例

HTML

<div class="animation-example">
    <div class="container">
        <p class="animation">You chose a cold night to visit our planet.</p>
    </div>
    <button class="activate" type="button">Activate animation</button>
    <div class="event-log"></div>
</div>
					

CSS

.container {
  height: 3rem;
}
.event-log {
  width: 25rem;
  height: 2rem;
  border: 1px solid black;
  margin: 0.2rem;
  padding: 0.2rem;
}
.animation.active {
  animation-duration: 2s;
  animation-name: slidein;
  animation-iteration-count: 2;
}
@keyframes slidein {
  from {
    transform: translateX(100%) scaleX(3);
  }
  to {
    transform: translateX(0) scaleX(1);
  }
}
					

JS

const animation = document.querySelector('p.animation');
const animationEventLog = document.querySelector('.animation-example>.event-log');
const applyAnimation = document.querySelector('.animation-example>button.activate');
let iterationCount = 0;
animation.addEventListener('animationstart', () => {
  animationEventLog.textContent = `${animationEventLog.textContent}'animation started' `;
});
animation.addEventListener('animationiteration', () => {
  iterationCount++;
  animationEventLog.textContent = `${animationEventLog.textContent}'animation iterations: ${iterationCount}' `;
});
animation.addEventListener('animationend', () => {
  animationEventLog.textContent = `${animationEventLog.textContent}'animation ended'`;
  animation.classList.remove('active');
  applyAnimation.textContent = "Activate animation";
});
animation.addEventListener('animationcancel', () => {
  animationEventLog.textContent = `${animationEventLog.textContent}'animation canceled'`;
});
applyAnimation.addEventListener('click', () => {
  animation.classList.toggle('active');
  animationEventLog.textContent = '';
  iterationCount = 0;
  let active = animation.classList.contains('active');
  if (active) {
    applyAnimation.textContent = "Cancel animation";
  } else {
    applyAnimation.textContent = "Activate animation";
  }
});
					

结果

规范

规范	状态	注释
CSS 动画	工作草案	初始定义

浏览器兼容性

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
animationstart event	Chrome 43	Edge 12	Firefox 51	IE 10	Opera 30	Safari 9	WebView Android 43	Chrome Android 43	Firefox Android 51	Opera Android 30	Safari iOS 9	Samsung Internet Android 4.0

图例

完整支持

完整支持

另请参阅

• CSS 动画
• Using CSS Animations
• AnimationEvent
• 相关事件： animationend , animationiteration , animationcancel
• 此事件在 Document 目标： animationstart
• 此事件在 Window 目标： animationstart

元数据

• 最后修改： Feb 16, 2020

相关话题

1. HTMLElement
2. 特性

   1. contentEditable
   2. contextMenu
   3. dir
   4. hidden
   5. innerText
   6. isContentEditable
   7. lang
   8. offsetHeight
   9. offsetLeft
   10. offsetParent
   11. offsetTop
   12. offsetWidth
   13. onabort
   14. onanimationcancel
   15. onanimationend
   16. onanimationiteration
   17. onauxclick
   18. onblur
   19. oncancel
   20. oncanplay
   21. oncanplaythrough
   22. onchange
   23. onclick
   24. onclose
   25. oncontextmenu
   26. oncopy
   27. oncuechange
   28. oncut
   29. ondblclick
   30. ondurationchange
   31. onended
   32. onerror
   33. onfocus
   34. onformdata
   35. ongotpointercapture
   36. oninput
   37. oninvalid
   38. onkeydown
   39. onkeypress
   40. onkeyup
   41. onload
   42. onloadeddata
   43. onloadedmetadata
   44. onloadend
   45. onloadstart
   46. onlostpointercapture
   47. onmousedown
   48. onmouseenter
   49. onmouseleave
   50. onmousemove
   51. onmouseout
   52. onmouseover
   53. onmouseup
   54. onpaste
   55. onpause
   56. onplay
   57. onplaying
   58. onpointercancel
   59. onpointerdown
   60. onpointerenter
   61. onpointerleave
   62. onpointermove
   63. onpointerout
   64. onpointerover
   65. onpointerup
   66. onreset
   67. onresize
   68. onscroll
   69. onselect
   70. onselectionchange
   71. onselectstart
   72. onsubmit
   73. ontouchcancel
   74. ontouchstart
   75. ontransitioncancel
   76. ontransitionend
   77. onwheel
   78. outerText
   79. title
3. 方法

   1. click()
   2. forceSpellCheck()
4. 事件

   1. animationcancel
   2. animationend
   3. animationiteration
   4. animationstart
   5. beforeinput
   6. change
   7. gotpointercapture
   8. input
   9. lostpointercapture
   10. pointercancel
   11. pointerdown
   12. pointerenter
   13. pointerleave
   14. pointermove
   15. pointerout
   16. pointerover
   17. pointerup
   18. transitioncancel
   19. transitionend
   20. transitionrun
   21. transitionstart
5. 继承：

   1. 元素
   2. 节点
   3. EventTarget