CSS animation jerky in firefox

问题

How can I make the animation smooth in 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/

回答1:

Add rotate(0.001deg) to your transforms

回答2:

Cant you make animation at 5%, 10%, 15% etc. or more detailed :) 1%, 2%, 3%, 4% etc.

来源：https://stackoverflow.com/questions/42467987/css-animation-jerky-in-firefox

标签

css

css3

css-animations