Javascript CSS动画不会重复

我试图用CSS动画替换一个容器，其中包括“缩放”和“旋转”以及一些小JavaScript。当您单击第一次按钮以显示第二个容器，第一次单击第二次按钮以显示第一个内容器时，一切都正常工作。之后，控制器被切换（设置延迟2秒），但动画不再工作。您需要重新加载页面以使其正常工作。完整的代码（嗯，大部分）在这里：。如果有人能找到问题的根源，我将不胜感激。：）

Lorem ipsum
乱数假文
/*Animācijas apraksts*/
@zoomOutRotate关键帧{
0%{变换：缩放（1）旋转（0度）；}
99%{变换：缩放（0）旋转（360度）；}
}
@关键帧缩放旋转{
0%{变换：缩放（1）旋转（0度）；}
99%{变换：缩放（0）旋转（-360度）；}
}
var kont1=document.getElementById（“prezentacija”）；
var kont2=document.getElementById（“informacija”）；
//
函数paradiCitu（）{
kont1.style.animation='zoomutrotate2s'；
setTimeout（函数（）{
kont1.style.visibility=“隐藏”
kont2.style.visibility=“可见”；
}, 2000);}
//
函数atpakal（）{
kont2.style.animation='zoominrotate2s'；
setTimeout（函数（）{
kont2.style.visibility=“隐藏”
kont1.style.visibility=“可见”；
//window.location.reload（）；
}, 2000);
}

您需要从元素中清除动画样式，然后再次给他

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

---

哦，上帝！它确实有效！非常感谢，欧灿！我的第一次访问是成功的！一开始我持怀疑态度。我错了！再次感谢！

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