动画onclick三次在mozilla firefox中不起作用

Question

动画可在以下浏览器中使用：

1）Internet Explorer 2）铬

无效： 1）Mozilla firefox

var $tab1 = $('.tab1');
$tab1.addClass('active');
$tab1.addClass('onloadStopAnimation');
setTimeout(function() {
console.log('came');
  $('.tab1').removeClass('onloadStopAnimation');
}, 5000);

$('.tab1').addClass('active');
var callTab = function(passon,passonTab) {
	$(passon).addClass('active');
  $(passonTab).removeClass('active');
}

div {
  position: relative;
}
span {
  display: table-cell;
padding: 1rem;
font-size: 1.4rem;
font-weight: bold;
text-decoration: none;
text-transform: none;
color: #fff;
background: blue;
cursor: pointer;
text-align: center;
width: auto;
border: none;
vertical-align: bottom;
}

.onloadStopAnimation {
  animation-duration: 0s !important;
  -webkit-animation-duration: 0s !important;
  -moz-animation-duration: 0s !important;
  -o-animation-duration: 0s !important;
  -ms-animation-duration: 0s !important;
}

.active {
  background-color: gray;
}

.active:after{
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 9px 0 9px;
  border-color: blue transparent transparent transparent;
  bottom: -1rem;
  left: 5%;
  margin-left: -9px;
  animation: rightFrames ease 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: rightFrames ease 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: rightFrames ease 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: rightFrames ease 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: rightFrames ease 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes rightFrames{
  0% {
    transform:  translate(0px,0px) ;
  }
  100% {
    transform:  translate(200px,0px);
  }
}

@-moz-keyframes rightFrames{
  0% {
    -moz-transform:  translate(0px,0px);
  }
  100% {
    -moz-transform:  translate(200px,0px) ;
  }
}

@-webkit-keyframes rightFrames {
  0% {
    -webkit-transform:  translate(0px,0px);
  }
  100% {
    -webkit-transform:  translate(200px,0px);
  }
}

@-o-keyframes animationFrames {
  0% {
    -o-transform:  translate(0px,0px);
  }
  100% {
    -o-transform:  translate(200px,0px);
  }
}

@-ms-keyframes rightFrames {
  0% {
    -ms-transform:  translate(0px,0px);
  }
  100% {
    -ms-transform:  translate(200px,0px);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span class="tab1" onclick="callTab('.tab1','.tab2')">
     Tab 1
    </span>
  <span class="tab2" onclick="callTab('.tab2','.tab1')">
     Tab 2
    </span>
</div>

jsfiddle Link click here ==>>

反映：

单击tab1和tab2和tab1

有人可以说明为什么它在mozilaa firefox中不起作用（我已经为mozilla支持添加了关键帧）。任何有关这方面的见解将不胜感激。