window屬性：onanimationend

onanimationend屬性

animationend事件的事件處理程序。當(dāng)CSS動(dòng)畫到達(dá)其活動(dòng)周期的末尾時(shí)，按照(animation-duration*animation-iteration-count) + animation-delay進(jìn)行計(jì)算，將發(fā)送此animation-delay事件。

onanimationend屬性語法

var animEndHandler = target.onanimationend;

target.onanimationend = Function

onanimationend屬性值

在animationend事件發(fā)生時(shí)調(diào)用的Function，它指示在target中CSS動(dòng)畫已經(jīng)開始，其中，所述目標(biāo)對象是一個(gè)HTML元素（HTMLElement），文件（Document），或窗口（Window）。該函數(shù)接收作為輸入的單個(gè)參數(shù)：描述發(fā)生的事件的AnimationEvent對象。

onanimationend屬性示例

CSS內(nèi)容

我們來看看我們正在動(dòng)畫的盒子的樣式。首先是盒子本身，我們設(shè)定它的大小、位置、顏色和布局。請注意，動(dòng)畫沒有任何內(nèi)容。那是因?yàn)槲覀儾幌Ｍ凶恿⒓撮_始動(dòng)畫。稍后我們將添加animation樣式以啟動(dòng)框的動(dòng)畫效果。

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

接下來描述動(dòng)畫序列。首先是"slideAnimation"類建立的 animation 會(huì)使該框在一段時(shí)間內(nèi)移動(dòng)五次，它使用"slideBox"關(guān)鍵幀集；接下來定義關(guān)鍵幀，他們描述了一個(gè)動(dòng)畫，使框從容器的左上角遷移到右下角。

.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描述了動(dòng)畫，但沒有將其連接到框，所以我們需要一些JavaScript代碼來實(shí)現(xiàn)這一點(diǎn)。

JavaScript內(nèi)容

在我們開始使用動(dòng)畫代碼之前，我們定義一個(gè)函數(shù)將信息記錄到用戶屏幕上的一個(gè)框中。我們將使用它來顯示關(guān)于我們收到的事件的信息。請注意使用AnimationEvent.animationName和AnimationEvent.elapsedTime獲取有關(guān)發(fā)生的事件的信息。

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

最后，我們設(shè)置一個(gè)處理器來點(diǎn)擊運(yùn)行動(dòng)畫的按鈕：

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

這將我們想要設(shè)置動(dòng)畫的框的類設(shè)置為包含animation描述的類，然后隱藏播放（play）按鈕，因?yàn)榇耸纠粫?huì)運(yùn)行一次動(dòng)畫。