キーフレームアニメーション火災（10、11、12、13）

Question

Reproduction online

Reproduction with vanilla Javascript

私はこれを使って、CSSアニメーションを作成しています：

持つ

.slides.future.active { 
    -webkit-animation-name: sectionIn; 
    animation-name: sectionIn; 
} 
@keyframes sectionIn { 
    .... 
}{ 

.animated { 
    transition: all 800ms ease; 
    -moz-transition: all 800ms ease; 

    -webkit-animation-duration: 800ms; 
    animation-duration: 800ms; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 

    -webkit-animation-timing-function: ease; 
    timing-function: ease; 
} 
.slides.future{ 
    -webkit-transform: translate3d(0, 100%, 0); 
    -ms-transform: translate3d(0, 100%, 0); 
    transform: translate3d(0, 100%, 0); 
} 

をHTMLの後に：

今、クラスを削除するときfutureを要素から削除すると、アニメーションは再び発生します。

これはIEでのみ発生します。 （10、11、12、13）のFirefox、Chromeでうまく機能し、サファリ...

Reproduction online

Reproduction with vanilla Javascript

Answer 1

可能な解決策は、CSSセレクタを変更することです。

.animatedの代わりに.future.animatedを使用し、そのセレクタでアニメーションを適用します。

.future.animated { 
    transition: all 800ms ease; 
    -moz-transition: all 800ms ease; 

    -webkit-animation-duration: 800ms; 
    animation-duration: 800ms; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 

    -webkit-animation-timing-function: ease; 
    timing-function: ease; 
} 

こうして、両方のクラスを持つ要素だけがアニメーション化されます。したがって、要素からクラスfutureを削除すると、再びアニメーション化できなくなります。

https://jsfiddle.net/jsms8p1k/17/

Answer 2

（IE用の非常に不思議ではない）不思議なあなたも.slidesと.activeがなく.futureされたときにどうするかをブラウザに指示する必要があります。あなたがその分け目のためにしなければ、それは再び元に戻すよう指示が出るまで元に戻ります。だから、追加する必要があります。

.slides.active:not(.future){ 
    -webkit-transform: translate3d(0, 0, 0); 
    -ms-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
} 

注

：はIE 11でのみテストされています。

Fiddle