html window 属性,window属性：onanimationend

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 += " "+ event.animationName +

" 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)按钮，因为此示例只会运行一次动画。