Text flickers during animation on firefox - html

Question

I want to do slide animation using CSS and Angular Js. I am upto this :JSFiddle
On chrome this animation works flawless. But on Firefox text shakes and flickers little bit when animation goes on.I am not able to figure out exact issue . Any idea ..
Code :
HTML:
<div ng-controller="animationCtrl">
<ul class='list'>
<li>
<div class="slide-animation">
<div class="slide-animation-wrap new-slide-wrap {{cssTimeInfo1}}"> <span class="text">{{valueSet1[0]}}</span>
<label class="small-label">{{valueSet2[1]}}</label>
</div>
<div class="slide-animation-wrap old-slide-wrap {{cssTimeInfo1}}"> <span class="text">{{valueSet1[1]}}</span>
<label class="small-label">{{valueSet2[1]}}</label>
</div>
</div>
</li>
</ul>
</div>
CSS :
.list > li {
box-sizing:border-box;
height: 72px;
display: inline-block;
margin-right: 1.06%;
padding: 15px;
vertical-align: top;
background-color: #f1f1f1;
-webkit-box-shadow: 0 0 7px rgba(210, 210, 210, 0.3) inset;
box-shadow: 0 0 7px rgba(210, 210, 210, 0.3) inset;
}
.small-label {
height: 24px;
display: block;
font-size: 0.714em;
margin-bottom: 0;
color: #999999;
text-transform: uppercase;
text-align: center;
}
.text {
height: 24px;
display: block;
font-size: 1.286em;
margin-bottom: 3px;
color: #666666;
text-align: center;
}
/* Slide animation */
.slide-animation {
overflow: hidden;
position: relative;
height: 40px;
}
.slide-animation-wrap {
position: relative;
width: 100%;
}
.slide-animation-wrap.new-slide-wrap {
top: -45px;
}
.slide-animation-wrap.old-slide-wrap {
top: -51px;
}
.slide-animation-wrap.slide-in-animation,
.slide-animation-wrap.slide-out-animation {
-webkit-animation: slide-outside-animation 1s linear forwards;
-o-animation: slide-outside-animation 1s linear forwards;
animation: slide-outside-animation 1s linear forwards;
}
.slide-animation-wrap:before,
.slide-animation-wrap:after {
content: " ";
display: table;
}
.slide-animation-wrap:after {
clear: both;
}
.slide-animation-wrap:before,
.slide-animation-wrap:after {
content: " ";
display: table;
}
.slide-animation-wrap:after {
clear: both;
}
#-webkit-keyframes slide-outside-animation {
0% {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
100% {
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
}
}
#-moz-keyframes slide-outside-animation {
0% {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
100% {
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
}
}
#-ms-keyframes slide-outside-animation {
0% {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
100% {
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
}
}
#keyframes slide-outside-animation {
0% {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
100% {
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
}
}
Angular :
var myApp = angular.module('myApp',[]);
myApp.controller('animationCtrl', ['$scope','$interval', function ($scope,$interval) {
$scope.valueSet1=['HGFhgfsffghfhgf','HGFhgfsffghfhgf'];
$scope.valueSet2=['ABC','ABC'];
$scope.cssTimeInfo1 = "display-none";
$scope.cssTimeInfo2 = "display-none";
var flag=0;
$interval(function(){
//0
$scope.cssTimeInfo1='slide-in-animation';
$scope.cssTimeInfo2 = "display-none";
flag++;
if(flag>1){
flag=0;
//0
$scope.cssTimeInfo1 = " ";
$scope.cssTimeInfo2 = " ";
}
else{
//1
$scope.cssTimeInfo1 = "slide-out-animation";
$scope.cssTimeInfo2 = "slide-in-animation";
}
},1000);
}]);

Answer 1

I had a text flickering issue on Firefox with transforms. Adding
backface-visibility: hidden;
to the transformed element fixed the issue for me.

Answer 2

I fixed the issue by adding:
will-change: transform;
on the element being transformed.
Provides a rendering hint to the user agent, stating what kinds of changes the author expects to perform on the element.
(Firefox 36, Safari 9, Chrome 36, Opera 24)
See MDN reference (link) for more information.
Note (from the MDN reference): will-change is intended to be used as a last resort, in order to try to deal with existing performance problems. It should not be used to anticipate performance problems.