在Firefox上动画时文本闪烁

我想用CSS和Angular Js来做幻灯片动画。我喜欢这个：JSFiddle 在铬上，这个动画完美无瑕。但是在Firefox上，当动画继续时，文本会抖动并闪烁一点。我无法弄清楚确切的问题。任何想法..在Firefox上动画时文本闪烁

代码：

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

角：

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

}]);

来源

2015-08-24 Bhagya

它在这里工作得很好。 – ketan

@ketan：你在Firefox上看过吗？ – Bhagya

是的。它工作正常。不闪烁。我正在使用最新版本的Firefox。 – ketan

我有一个文本闪烁问题上的Firefox浏览器变换。添加

backface-visibility: hidden;

的转换元件固定对我来说是问题。

来源

2016-01-18 18:31:38 sdjn

在Firefox上动画时文本闪烁

回答

相关问题