Reputation: 6470
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
Reputation: 51
Cant you make animation at 5%, 10%, 15% etc. or more detailed :) 1%, 2%, 3%, 4% etc.
Upvotes: 0