css animation not smooth on different browsers

Question

I'm currently doing some tests for a loading icon, and I#m experiencing some strange diffence on the smoothness on different browsers.

Have a look at : https://jsfiddle.net/42xbt4bz/6/

Css:

.loader-icon[class*='bullets'] {
width: 6px;
height: 6px;
display: block;
position: relative;
margin-left: 20px;
margin-top: 50px;
margin-bottom: 10px;
}

.loader-icon[class*='bullets'] span {
content: "";
background: #000000;
width: 6px;
height: 6px;
position:  absolute;
top: 0;
left: 0;
border-radius: 10px;
}
.loader-icon[class*='bullets'] span:nth-of-type(1) { left: 12px; }
.loader-icon[class*='bullets'] span:nth-of-type(3) { left: -12px; }

/* bullets fade */
.loader-icon.bullets-fade span {
-webkit-animation: loader-bullets-fade 1.6s infinite ease;
-moz-animation: loader-bullets-fade 1.6s infinite ease;
animation: loader-bullets-fade 1.6s infinite ease;
animation-delay: 0.4s;
}
.loader-icon.bullets-fade span:nth-of-type(1) { animation-delay: 0.8s; }
.loader-icon.bullets-fade span:nth-of-type(3) { animation-delay: 0s; }
@-webkit-keyframes loader-bullets-fade {
  0% { opacity: 1; }
  40% { opacity: 0.3; }
  80% { opacity: 1; }
}
@-moz-keyframes loader-bullets-fade {
  0% { opacity: 1; }
  40% { opacity: 0.3; }
  80% { opacity: 1; }
}
@keyframes loader-bullets-fade {
  0% { opacity: 1; }
  40% { opacity: 0.3; }
  80% { opacity: 1; }
}

/* bullets jump */
.loader-icon.bullets-jump span {
-webkit-animation: loader-bullets-jump 1.2s infinite ease;
-moz-animation: loader-bullets-jump 1.2s infinite ease;
animation: loader-bullets-jump 1.2s infinite ease;
animation-delay: 0.2s;
}
.loader-icon.bullets-jump span:nth-of-type(1) { animation-delay: 0.4s; }
.loader-icon.bullets-jump span:nth-of-type(3) { animation-delay: 0s; }
@-webkit-keyframes loader-bullets-jump {
  0% { top: 0; }
  40% { top: -4px; }
  80% { top: 0; }
}
@-moz-keyframes loader-bullets-jump {
  0% { top: 0; }
  40% { top: -4px; }
  80% { top: 0; }
}
@keyframes loader-bullets-jump {
  0% { top: 0; }
  40% { top: -4px; }
  80% { top: 0; }
}

/* bullets pulse */
.loader-icon.bullets-pulse span {
-webkit-animation: loader-bullets-pulse 1.2s infinite ease;
-moz-animation: loader-bullets-pulse 1.2s infinite ease;
animation: loader-bullets-pulse 1.2s infinite ease;
animation-delay: 0.2s;
}
.loader-icon.bullets-pulse span:nth-of-type(1) { animation-delay: 0.4s; }
.loader-icon.bullets-pulse span:nth-of-type(3) { animation-delay: 0s; }

@-webkit-keyframes loader-bullets-pulse {
  0% { -webkit-transform: scale(1); transform: scale(1); }
  40% { -webkit-transform: scale(1.1); transform: scale(1.3); }
  80% { -webkit-transform: scale(1); transform: scale(1); }
}
@-moz-keyframes loader-bullets-pulse {
  0% { -webkit-transform: scale(1); transform: scale(1); }
  40% { -webkit-transform: scale(1.1); transform: scale(1.3); }
  80% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes loader-bullets-pulse {
  0% { -webkit-transform: scale(1); transform: scale(1); }
  40% { -webkit-transform: scale(1.1); transform: scale(1.3); }
  80% { -webkit-transform: scale(1); transform: scale(1); }
}

It's very strange to me and I have no idea how I can optimize these animations. Hope you can help me

Answer 1

I don't think there's a whole lot of strange here. What you're seeing is the natural difference in how browsers render things. Don't forget, most of them use their own, different rendering engines.

Now, scale animation in FF in particular does look bad. Yet, for all of these, if you increase the size of the animation it will seem smoother. That is for several reasons:

1. First and foremost, when you move something by only a couple of pixels on a standard, but somewhat low-res display by modern standards, it will look bad. Simply because you're literally moving the object 1px per half a second or so. Increase that to 30px and you'll notice how much smoother it looks. This is particularly supported by your example #1. Since dots are stationary but opacity provides a lot of keyframes this animation looks the best across all browsers.
2. Animations that are not offloaded to the gpu will have a lower frame-rate altogether. On top of that, if you make the animation very slow and dragged-out, the end result will look even worse.

But above all else, these are loading animations. Hopefully, the user will never have to look at them long enough to notice inconsistencies.