onanimationend属性

animationend事件的事件处理程序。当CSS动画到达其活动周期的末尾时，按照(animation-duration*animation-iteration-count) + animation-delay进行计算，将发送此animation-delay事件。

onanimationend属性语法

var animEndHandler = target.onanimationend;

target.onanimationend = Function

onanimationend属性值

在animationend事件发生时调用的Function，它指示在target中CSS动画已经开始，其中，所述目标对象是一个HTML元素（HTMLElement），文件（Document），或窗口（Window）。该函数接收作为输入的单个参数：描述发生的事件的AnimationEvent对象。

onanimationend属性示例

CSS内容

我们来看看我们正在动画的盒子的样式。首先是盒子本身，我们设定它的大小、位置、颜色和布局。请注意，动画没有任何内容。那是因为我们不希望盒子立即开始动画。稍后我们将添加animation样式以启动框的动画效果。

#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;
} 

接下来描述动画序列。首先是"slideAnimation"类建立的 animation 会使该框在一段时间内移动五次，它使用"slideBox"关键帧集；接下来定义关键帧，他们描述了一个动画，使框从容器的左上角迁移到右下角。

.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))
  }
}

由于CSS描述了动画，但没有将其连接到框，所以我们需要一些JavaScript代码来实现这一点。

JavaScript内容

在我们开始使用动画代码之前，我们定义一个函数将信息记录到用户屏幕上的一个框中。我们将使用它来显示关于我们收到的事件的信息。请注意使用AnimationEvent.animationName和AnimationEvent.elapsedTime获取有关发生的事件的信息。

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";
};

然后，我们建立了事件处理程序animationstart和animationend事件：

let box = document.getElementById("box");

box.onanimationstart = function(event) {
  log("Animation started", event);
}

box.onanimationend = function(event) {
  log("Animation stopped", event);
};

最后，我们设置一个处理器来点击运行动画的按钮：

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

这将我们想要设置动画的框的类设置为包含animation描述的类，然后隐藏播放（play）按钮，因为此示例只会运行一次动画。