Felix A J
Felix A J

Reputation: 6470

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/

Upvotes: 3

Views: 1555

Answers (2)

user3947093
user3947093

Reputation:

Add rotate(0.001deg) to your transforms

Upvotes: 3

okonek83
okonek83

Reputation: 51

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

Upvotes: 0

Related Questions