Firefox CSS Animation Smoothing (sub-pixel smoothing) - css

Question

I'm creating a CSS keyframe animation to have an element appear as if it is casually/slowly floating around a bit. It's nested in parents, one which uses translateX() to slowly move it left and right, and one which uses translateY() to slowly and independently move it up and down.
Chrome and Safari render this perfectly, giving it a gradual swaying movement. It smooths the animation (perhaps using sub-pixel smoothing?) so that everything appears very smooth. Firefox however, animates it pixel by pixel, so rather than smoothly swaying about, you can see it jump at every pixel.
View the JSFiddle in Chrome and FireFox to view the difference: http://jsfiddle.net/gonygdfz/6/
Is there any way to make FireFox render this smoothly rather than having it jumping pixel by pixel? It's extremely noticeable in the actual application for this.
The Markup:
<div id="parent">
<div id="move-x">
<div id="move-y">
<div id="child"></div>
</div>
</div>
</div>
The CSS:
#parent {
width: 400px;
height: 326px;
background-color: yellow;
background: url(http://paint.net.amihotornot.com.au/Features/Effects/Plugins/Render/Grid_CheckerBoard_Maker/Grid_CheckerBoard_Maker.Paint.NET.001.png) top center repeat;
}
#child {
position: absolute;
top: 75px;
left: 150px;
width: 100px;
height: 100px;
background-color: black;
animation: range-y 10s infinite ease;
}
#move-x {
animation: range-x 10s infinite ease;
-webkit-animation: range-x 10s infinite ease;
}
#move-y {
animation: range-y 15s infinite ease;
-webkit-animation: range-y 15s infinite ease;
}
#keyframes range-x {
0% {
transform: translateX(0);
}
30% {
transform: translateX(-8px);
}
50% {
transform: translateX(1px);
}
65% {
transform: translateX(6px);
}
80% {
transform: translateX(0px);
}
89% {
transform: translateX(-3px);
}
100% {
transform: translateX(0);
}
}
#keyframes range-y {
0% {
transform: translateY(0);
}
20% {
transform: translateY(13px);
}
35% {
transform: translateY(-1px);
}
70% {
transform: translateY(-14px);
}
90% {
transform: translateY(2px);
}
100% {
transform: translateY(0);
}
}
#-webkit-keyframes range-x {
0% {
transform: translateX(0);
}
30% {
transform: translateX(-8px);
}
50% {
transform: translateX(1px);
}
65% {
transform: translateX(6px);
}
80% {
transform: translateX(0px);
}
89% {
transform: translateX(-3px);
}
100% {
transform: translateX(0);
}
}
#-webkit-keyframes range-y {
0% {
transform: translateY(0);
}
20% {
transform: translateY(13px);
}
35% {
transform: translateY(-1px);
}
70% {
transform: translateY(-14px);
}
90% {
transform: translateY(2px);
}
100% {
transform: translateY(0);
}
}

Answer 1

The rendering engines for each browser is obviously different. Firefox does not implement an anti-aliasing effect on CSS animations. This does not inherently make it better or worse, it just depends on what you are animating. Linear transitions can appear undesirably blurred in Chrome for example.
It appears what you would like to achieve is to have an anti-aliased/sub-pixel smoothed transitions. We can't change the way the engine renders but we can manipulate the animation to appear softer to the end user.
ALL IS NOT LOST
I have modified your answer and rendered a smoother version next to your original. This should appear softer when viewed in Firefox.
CLICK FOR COMPARISON
Techniques used for this effect:
Linear transitions instead of ease.
Box-shadow on animated object. (Softened edge helps create fake AA effect).
Rotate object. Adding the smallest rotate helps to better utilised the rendering engine.
CSS
#parent {
width: 50%;
float:left;
height: 326px;
background-color: yellow;
background: url(http://paint.net.amihotornot.com.au/Features/Effects/Plugins/Render/Grid_CheckerBoard_Maker/Grid_CheckerBoard_Maker.Paint.NET.001.png) top center repeat;
}
#child {
position: absolute;
top: 75px;
left: 150px;
width: 100px;
height: 100px;
background-color: black;
box-shadow:0 0 1px rgba(0,0,0,0.7);
animation: range-y 10s infinite linear;
-webkit-animation: range-y 10s infinite linear;
}
#move-x {
animation: range-x 10s infinite linear;
-webkit-animation: range-x 10s infinite linear;
}
#move-y {
animation: range-y 15s infinite linear;
-webkit-animation: range-y 15s infinite linear;
}
#keyframes range-x {
0% {transform: translateX(0);}
30% {transform: translateX(-8px) rotate(0.02deg);}
50% {transform: translateX(1px) rotate(0deg);}
65% {transform: translateX(6px) rotate(0.02deg);}
80% {transform: translateX(0px) rotate(0deg);}
89% {transform: translateX(-3px) rotate(0.02deg);}
100% {transform: translateX(0) rotate(0deg);}
}
#keyframes range-y {
0% {transform: translateY(0);}
20% {transform: translateY(13px) rotate(0.02deg);}
35% {transform: translateY(-1px) rotate(0deg);}
70% {transform: translateY(-14px) rotate(0.02deg);}
90% {transform: translateY(2px) rotate(0deg);}
100% {transform: translateY(0) rotate(0.02deg);}
}
#-webkit-keyframes range-x {
0% {transform: translateX(0);}
30% {transform: translateX(-8px) rotate(0.02deg);}
50% {transform: translateX(1px) rotate(0deg);}
65% {transform: translateX(6px) rotate(0.02deg);}
80% {transform: translateX(0px) rotate(0deg);}
89% {transform: translateX(-3px) rotate(0.02deg);}
100% {transform: translateX(0) rotate(0deg);}
}
#-webkit-keyframes range-y {
0% {transform: translateY(0);}
20% {transform: translateY(13px) rotate(0.02deg);}
35% {transform: translateY(-1px) rotate(0deg);}
70% {transform: translateY(-14px) rotate(0.02deg);}
90% {transform: translateY(2px) rotate(0deg);}
100% {transform: translateY(0) rotate(0.02deg);}
}
FINAL WORD
You can still tweak the effects a little either way to fit your requirements.
It's not perfect but I hope it helps soften the end effect for your actual animation.

Answer 2

Use a small amount of rotation with the transformation. This forces Firefox to avoid the optimization and resample the image on every frame.
#keyframes optimized {
0%{
transform: translateX(0%);
}
100%{
transform: translateX(200px);
}
}
#keyframes subpixel {
0%{
transform: translateX(0%) rotate(0.1deg);
}
100%{
transform: translateX(200px) rotate(0.1deg);
}
}
div{
width:5px;
height:50px;
background-color: red;
animation-duration:30s;
animation-iteration-count: infinite;
animation-direction:alternate;
animation-timing-function:linear;
}
.optimized{
animation-name: optimized;
margin-bottom:1px;
}
.subpixel{
animation-name: subpixel;
}
<div class="optimized">
</div>
<div class="subpixel">
</div>