css动画只在FF中运行一次，可以很好地工作其他webkit浏览器（比如Chrome等）

Question

我有两个名为slideLeft和slideRight的css类。我使用jquery动态添加它们，如下面的代码为jquery。但是动画只在FF中生效一次，而在webkit浏览器中完全按预期工作。

以下是Fiddle（在FF和Chrome中尝试此操作）

我有以下html：

<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>

和我的jquery：

$('#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');
    });

和我的css：

.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%);
    }
}

它在webkit浏览器上运行良好，但在mozilla中运行不正常。我错过了什么？