GlobalEventHandlers.onanimationstart

在此页

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

An event handler for the animationstart event. This event is sent when a CSS Animation starts to play.

句法

var animStartHandler = target.onanimationstart;
target.onanimationstart = Function

值

A 函数 to be called when an animationstart event occurs indicating that a CSS animation has begun on the target , where the target object is an HTML element ( HTMLElement ), document ( Document ), or window ( Window ). The function receives as input a single parameter: an AnimationEvent object describing the event which occurred.

范例

HTML 内容

<div class="main">
  <div id="box">
    <div id="text">Box</div>
  </div>
</div>
<div class="button" id="play">
  Play Animation
</div>
<pre id="log"></pre>

CSS content

:root {
  --boxwidth:50px;
}
.main {
  width: 300px;
  height:300px;
  border: 1px solid black;
}
.button {
  cursor: pointer;
  width: 300px;
  border: 1px solid black;
  font-size: 16px;
  text-align: center;
  margin-top: 0;
  padding-top: 2px;
  padding-bottom: 4px;
  color: white;
  background-color: darkgreen;
  font: 14px "Open Sans", "Arial", sans-serif;
}
#text {
  width: 46px;
  padding: 10px;
  position: relative;
  text-align: center;
  align-self: center;
  color: white;
  font: bold 1.4em "Lucida Grande", "Open Sans", sans-serif;
}

Leaving out some bits of the CSS that don't matter for the discussion here, let's take a look at the styles for the box that we're animating. First is the box itself. We set its size, position, color, and layout. Note that there's nothing there about animation. That's because we don't want the box to start animating right away. We'll add the animation style later to start animating the box.

#box {
  width: var(--boxwidth);
  height: var(--boxwidth);
  left: 0;
  top: 0;
  border: 1px solid #7788FF;
  margin: 0;
  position: relative;
  background-color: #2233FF;
  display: flex;
  justify-content: center;
}

The animation sequence is described next. First, the "slideAnimation" class, which establishes the animation that will cause the box to move over the course of five seconds, one time, using the "slideBox" keyframe set. The keyframes are defined next; they describe an animation which causes the box to migrate from the top-left corner of the container to the bottom-right corner.

.slideAnimation {
  animation: 5s ease-in-out 0s 1 slideBox;
}
@keyframes slideBox {
  from {
    left:0;
    top:0;
  }
  to {
    left:calc(100% - var(--boxwidth));
    top:calc(100% - var(--boxwidth))
  }
}

Since the CSS describes the animation but doesn't connect it to the box, we'll need some JavaScript code to do that. We'll get to that shortly.

JavaScript 内容

Before we get to the animation code, we define a function which logs information to a box on the user's screen. We'll use this to show information about the events we receive. Note the use of AnimationEvent.animationName and AnimationEvent.elapsedTime to get information about the event which occurred.

function log(msg, event) {
  let logBox = document.getElementById("log");
  logBox.innerHTML += msg;
  if (event) {
    logBox.innerHTML += " <code>"+ event.animationName +
        "</code> at time " + event.elapsedTime.toFixed(2) +
        " seconds.";
  }
  logBox.innerHTML += "\n";
};

Then we set up the event handlers for the animationstart and animationend 事件：

let box = document.getElementById("box");
box.onanimationstart = function(event) {
  log("Animation started", event);
}
box.onanimationend = function(event) {
  log("Animation stopped", event);
};

Finally, we set up a handler for a click on the button that runs the animation:

document.getElementById("play").addEventListener("click", function(event) {
  document.getElementById("box").className = "slideAnimation";
  event.target.style.display = "none";
}, false);

This sets the class of the box we want to animate to the class that contains the animation description, then hides the play button because this example will only run the animation once. For information about why, and how to support running an animation more than once, see Run an animation again in CSS 动画提示和技巧 .

结果

Assembled together, you get this:

规范

规范	状态	注释
CSS 动画 The definition of 'onanimationstart' 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
`onanimationstart`	Chrome Yes Yes Yes Alternate Name Alternate Name Uses the non-standard name: `onwebkitanimationstart`	Edge ≤79 ≤79 ≤79 Alternate Name Alternate Name Uses the non-standard name: `onwebkitanimationstart`	Firefox 51	IE ?	Opera ?	Safari 9	WebView Android Yes Yes Yes Alternate Name Alternate Name Uses the non-standard name: `onwebkitanimationstart`	Chrome Android Yes Yes Yes Alternate Name Alternate Name Uses the non-standard name: `onwebkitanimationstart`	Firefox Android 51	Opera Android ?	Safari iOS 9	Samsung Internet Android Yes Yes Yes Alternate Name Alternate Name Uses the non-standard name: `onwebkitanimationstart`

图例

完整支持
兼容性未知 ?

另请参阅

animationstart event this event handler is triggered by.
AnimationEvent

元数据

最后修改： 2019 年 3 月 23 日

在此页

句法

值

范例

HTML 内容

CSS content

JavaScript 内容

结果

规范

浏览器兼容性

图例

另请参阅

相关话题