CSS анимация не повторяется

Question

Я пытаюсь заменить один контейнер другим, используя анимацию CSS с «масштабированием» и «вращением», а также небольшую JavaScript. Все работает, пока вы нажимаете кнопку в первый раз, чтобы отобразить второй контейнер, и в первый раз - вторую кнопку, чтобы отобразить первого участника. После этого контролеры переключаются (с задержкой установки 2 с), но анимация больше не работает. Вам необходимо перезагрузить страницу, чтобы она работала правильно. Полный код (ну, большая его часть) находится здесь: https://jsfiddle.net/PPSkola/dmtbw6hz/. Буду признателен, если кто-нибудь сможет найти источник проблемы. :)

<div id="prezentacija">Lorem ipsum</div>
<div id="informacija">Lorem ipsum</div>



/*  Animācijas apraksts  */
@keyframes zoomOutRotate {
    0% {transform: scale(1) rotate(0deg);}
    99% {transform: scale(0) rotate(360deg);}
}
@keyframes zoomInRotate {
    0% {transform: scale(1) rotate(0deg);}
    99% {transform: scale(0) rotate(-360deg);}
}



var kont1 = document.getElementById("prezentacija");
var kont2 = document.getElementById("informacija");
//
function paradiCitu() {
    kont1.style.animation = 'zoomOutRotate 2s';
    setTimeout(function(){
    kont1.style.visibility = "hidden"
    kont2.style.visibility = "visible";
}, 2000);}
//
function atpakal() {
    kont2.style.animation = 'zoomInRotate 2s';
    setTimeout(function(){
        kont2.style.visibility = "hidden"
        kont1.style.visibility = "visible";
        //window.location.reload();
    }, 2000);
}

Answer 1

нужно очистить стиль анимации от элемента и дать ему заново

//  Atrodiet konteinerus dokumentā
var kont1 = document.getElementById("prezentacija");
var kont2 = document.getElementById("informacija");
//
//  Paslēpt pirmo ekrānu ar animāciju un parādīt otro
function paradiCitu() {
    //  Uzsākt animāciju
    kont1.style.animation = 'zoomOutRotate 2s';
    //  Paslēpiet vienu konteineru un parādiet citu pēc 2 sekundēm
    setTimeout(function(){
        kont1.style.visibility = "hidden"
        kont2.style.visibility = "visible";

 // this is what you need
  kont1.style.animation = "";
  kont2.style.animation = "";
  
    }, 2000);
}
//
//  Atgriezties atpakaļ
function atpakal() {
    //  Uzsākt animāciju
    kont2.style.animation = 'zoomInRotate 2s';
    //  Paslēpiet vienu konteineru un parādiet citu pēc 2 sekundēm
    setTimeout(function(){
        kont2.style.visibility = "hidden"
        kont1.style.visibility = "visible";
        //window.location.reload();
    }, 2000);
    
}