Javascript css动画在FF中只运行一次，在其他webkit浏览器（如Chrome等）中运行良好

我有两个css类叫做slideLeft和slideRight。我使用jquery动态添加它们，就像下面jquery的代码一样。但动画只在FF中生效一次，而在webkit浏览器中完全可以正常工作

这是在FF和Chrome中尝试此功能的方法

我有以下html：

还有我的css：

---

它在webkit浏览器上运行良好，但在mozilla中不起作用。我遗漏了什么？？？

可能是动画属性的前缀“-moz-”？我已经附加了一把小提琴..请看一看这就像FF在执行addClass函数时会记住一样……但我也尝试了RemoveClassis这是一个愚蠢的jquery错误。解决了

<div class="container">
  <h3 align="center" style="padding-top: 10px;">
  <span id="login" style="cursor: pointer; color: #006699;">LOGIN</span><span> | </span><span id="register" style="cursor: pointer; color: #006699;">REGISTER</span></h3>
  <div class="form-group login" style="border-top: 1px solid gray;">
  <div class="col-md-4" style="background: #fff; padding-top: 5px;">
  <form method="post">
<div style="padding-bottom: 15px; padding-top: 15px;"><label>Name:</label>
<input type="text" name="name" class="form-control">
</div>
<div style="padding-bottom: 15px;"><label>Email:</label>
<input type="email" name="email" class="form-control">
</div>
<div style="padding-bottom: 25px;"><label>Password:</label>
<input type="password" name="pwd" class="form-control"></div>
<div><button class="btn btn-success form-control"><b>Register</b></button></div>
</form>
</div>
<div class="col-md-4"></div>
</div>
<div class="form-group register" style="border-top: 1px solid gray; padding-bottom: 301px; display: none;">
<div class="col-md-4"></div>
<div class="col-md-4" style="background: #fff; padding-top: 5px;">
<form method="post">
<div style="padding-bottom: 15px;"><label>Email:</label>
<input type="email" name="em" class="form-control">
</div>
<div style="padding-bottom: 25px;"><label>Password:</label>
<input type="password" name="pwd1" class="form-control"></div>
<div><button class="btn btn-success form-control"><b>Login</b></button></div>
</form>
</div>
<div class="col-md-4"></div>
</div>
</div>

$('#login').css('color', '#000');
    $('#register').on('click', function(){
        $('#register').css('color', '#000');
        $('.login').removeClass('slideRight');
        $('.login').hide();
        $('.register').addClass('slideRight');
        $('.register').show();
        $('#login').css('color', '#006699');
    });
    $('#login').on('click', function(){
        $('#login').css('color', '#000');
        $('.register').removeClass('slideLeft');
        $('.register').hide();
        $('.login').addClass('slideLeft');
        $('.login').show();
        $('#register').css('color', '#006699');
    });

.slideLeft{
    animation-name: slideLeft;
    -webkit-animation-name: slideLeft;  

    animation-duration: 1s; 
    -webkit-animation-duration: 1s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     

    visibility: visible !important; 
}

@keyframes slideLeft {
    0% {
        transform: translateX(150%);
    }
    50%{
        transform: translateX(-8%);
    }
    65%{
        transform: translateX(4%);
    }
    80%{
        transform: translateX(-4%);
    }
    95%{
        transform: translateX(2%);
    }           
    100% {
        transform: translateX(0%);
    }
}

@-webkit-keyframes slideLeft {
    0% {
        -webkit-transform: translateX(150%);
    }
    50%{
        -webkit-transform: translateX(-8%);
    }
    65%{
        -webkit-transform: translateX(4%);
    }
    80%{
        -webkit-transform: translateX(-4%);
    }
    95%{
        -webkit-transform: translateX(2%);
    }           
    100% {
        -webkit-transform: translateX(0%);
    }
}

/*
==============================================
slideRight
==============================================
*/


.slideRight{
    animation-name: slideRight;
    -webkit-animation-name: slideRight; 

    animation-duration: 1s; 
    -webkit-animation-duration: 1s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     

    visibility: visible !important; 
}

@keyframes slideRight {
    0% {
        transform: translateX(-150%);
    }
    50%{
        transform: translateX(8%);
    }
    65%{
        transform: translateX(-4%);
    }
    80%{
        transform: translateX(4%);
    }
    95%{
        transform: translateX(-2%);
    }           
    100% {
        transform: translateX(0%);
    }   
}

@-webkit-keyframes slideRight {
    0% {
        -webkit-transform: translateX(-150%);
    }
    50%{
        -webkit-transform: translateX(8%);
    }
    65%{
        -webkit-transform: translateX(-4%);
    }
    80%{
        -webkit-transform: translateX(4%);
    }
    95%{
        -webkit-transform: translateX(-2%);
    }           
    100% {
        -webkit-transform: translateX(0%);
    }
}