Firefox 中的 CSS 动画不流畅

Question

如何在 firefox 中使动画流畅？

span{
  background : url(http://www.clker.com/cliparts/F/g/8/N/k/X/black-question-mark-square-icon-md.png) no-repeat;
  background-size: 100%;
  -webkit-transition: all ease 1s;
   -moz-transition: all ease 1s;
    -ms-transition: all ease 1s;
     -o-transition: all ease 1s;
        transition: all ease 1s;
height: 98px;
position: absolute;
width: 98px;
left: 100px;
top:100px;

-webkit-animation: spanAnimate 4s linear infinite alternate;
-moz-animation: spanAnimate 4s linear infinite alternate;
-o-animation: spanAnimate 4s linear infinite alternate;
animation: spanAnimate 4s linear infinite alternate;
}


@keyframes spanAnimate {
 0% {
  -webkit-transform: translate3d(-5%, -5%, 0);
 -moz-transform: translate3d(-5%, -5%, 0);
  -ms-transform: translate3d(-3%, -5%, 0);
   -o-transform: translate3d(-5%, -5%, 0);
      transform: translate3d(-5%, -5%, 0);
 }

 20%{
  -webkit-transform: translate3d(0%, 1%, 0);
 -moz-transform: translate3d(0%, 1%, 0);
  -ms-transform: translate3d(0%, 1%, 0);
   -o-transform: translate3d(0%, 1%, 0);
      transform: translate3d(0%, 1%, 0);
 }

 40%{
  -webkit-transform: translate3d(1%, 3%, 0);
 -moz-transform: translate3d(1%, 3%, 0);
  -ms-transform: translate3d(1%, 3%, 0);
   -o-transform: translate3d(1%, 3%, 0);
      transform: translate3d(1%, 3%, 0);
 }
 60%{
  -webkit-transform: translate3d(3%, 2%, 0);
 -moz-transform: translate3d(3%, 2%, 0);
  -ms-transform: translate3d(3%, 2%, 0);
   -o-transform: translate3d(3%, 2%, 0);
      transform: translate3d(3%, 2%, 0);
 }

 100% {
  -webkit-transform: translate3d(-5%, -5%, 0);
 -moz-transform: translate3d(-5%, -5%, 0);
  -ms-transform: translate3d(-3%, -5%, 0);
   -o-transform: translate3d(-5%, -5%, 0);
      transform: translate3d(-5%, -5%, 0);
 }
}

<span></span>

fiddle - https://jsfiddle.net/afelixj/cxvqk3et/

Answer 1

将 rotate(0.001deg) 添加到您的变换中