animationend/webkitAnimationEndイベントが呼び出される前に遅延が発生するのはなぜですか？

Question

私はanimationendを聞くと、遅れて解雇されます。あなたはアニメーションが完了したことを見ることができます（divは正しい場所に移動されます）、イベントはもう300-500msは発射されません。

JSFiddle：https://jsfiddle.net/9q0scpa0/4/

これはなぜですか？

HTML：

<div class="page" id="page1" onclick="restart()"> 
    Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/> 
    Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/> 
    Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/> 
    Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/> 
</div> 
<div class="page" id="page2" onclick="restart()"> 
    Page 2 
</div> 

CSS：

* 
{ 
    margin: 0em; 
    padding: 0em; 
} 

html 
{ 
    height: 100%; 
    width: 100%; 
} 

body 
{ 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 

.page 
{ 
    position: relative; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
    background-color: red; 
} 

@keyframes moveNext 
{ 
    0% { 
    transform: translate(0em,100%); 
    -webkit-transform: translate(0em,0%); 
    -moz-transform: translate(0em,0%); 
    } 

    100% { 
    transform: translate(0em,-100%); 
    -webkit-transform: translate(0em,-100%); 
    -moz-transform: translate(0em,-100%); 
    } 
} 

@keyframes movePrevious 
{ 
    0% { 
    transform: translate(0em,-100%); 
    -webkit-transform: translate(0em,-100%); 
    -moz-transform: translate(0em,-100%); 
    display: block; 
    } 

    100% { 
    transform: translate(0em,0%); 
    -webkit-transform: translate(0em,0%); 
    -moz-transform: translate(0em,0%); 
    } 
} 

#page1.leave 
{ 
    z-index: 0; 
    animation-name: moveNext; 
    -webkit-animation-delay: 200ms; 
    animation-delay: 200ms; 
    animation-duration: 800ms; 
    animation-iteration-count: 1; 
    animation-timing-function: ease-in-out; 
    animation-fill-mode: forwards; 
} 

#page2.enter 
{ 
    background-color: blue; 
    z-index: 1; 
    animation-name: moveNext; 
    animation-duration: 750ms; 
    animation-iteration-count: 1; 
    animation-timing-function: ease-in-out; 
    animation-fill-mode: forwards; 
} 

#page1.enter 
{ 
    z-index: 0; 
    animation-name: movePrevious; 
    animation-duration: 800ms; 
    animation-iteration-count: 1; 
    animation-timing-function: ease-in-out; 
    animation-fill-mode: forwards; 
} 

#page2.leave 
{ 
    background-color: blue; 
    z-index: 1; 
    animation-name: movePrevious; 
    -webkit-animation-delay: 200ms; 
    animation-delay: 200ms; 
    animation-duration: 750ms; 
    animation-iteration-count: 1; 
    animation-timing-function: ease-in-out; 
    animation-fill-mode: forwards; 
} 

はJavaScript：

var isMoveNext = true; 
var page1 = document.getElementById("page1"); 
var page2 = document.getElementById("page2"); 

window.restart = function() 
{ 
    //Moving next 
    if (isMoveNext) 
    { 
    page1.className = "page leave"; 
    page2.className = "page enter"; 
    isMoveNext = false; 
    } 

    else 
    { 
    page1.className = "page enter"; 
    page2.className = "page leave"; 
    isMoveNext = true; 
    } 
} 

page1.addEventListener("animationend", function(event) { console.log("page 1"); }, false); 
page2.addEventListener("animationend", function(event) { console.log("page 2"); }, false); 
page1.addEventListener("webkitAnimationEnd", function(event) { console.log("page 1"); }, false); 
page2.addEventListener("webkitAnimationEnd", function(event) { console.log("page 2"); }, false); 
page1.addEventListener("MSAnimationEnd", function(event) { console.log("page 1"); }, false); 
page2.addEventListener("MSAnimationEnd", function(event) { console.log("page 2"); }, false); 

Answer 1

それが緩和によるものです。アニメーションが終了したように見えても、それは最終的な値にスナップするある閾値に達するまで、まだ微量移動しています。このしきい値は、緩和するときに目に見えるスナップを防ぐために、意図的に非常に小さく保たれます。

イージングをlinearに切り替えると、アニメーションが視覚的に最後に達するとすぐにanimationendイベントが発生します。