15

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); 
  }
}
Ryan
  • 17,511
  • 23
  • 63
  • 88
  • While this doesn't address your sub-pixel smoothing problem, you can use the `transition` property to help smooth out the positioning. `transition: all 2s ease 0s;` – Etheryte Jan 10 '15 at 22:38

2 Answers2

14

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.

DreamTeK
  • 32,537
  • 27
  • 112
  • 171
  • It does soften, but to me, the shape of the box seems to change. As the box moves downwards, its height gets smaller. When it moves sideways, its width appears to change. – The Pragmatick Jan 12 '15 at 15:49
  • You have simply copied `rotate(0.002deg)` from [here](http://webcache.googleusercontent.com/search?q=cache:http://gielberkers.com/how-to-fix-shaking-css-transitions-in-firefox/&gws_rd=cr&ei=ee2zVPKYLMaVuATV-IDQBw) and didn't give attribution. – The Pragmatick Jan 12 '15 at 15:54
  • 3
    @ThePragmatick A wild assumption to say the least. I have been using this techniqiue for a few years. Whether that was where I originaly learnt it from I couldn't say, it was a long time ago. It was me however who spent two hours trying to come up with a working demo for the op where no one else was willing to offer help. – DreamTeK Jan 12 '15 at 16:47
  • I don't know whether you copied it or knew it already. But at the least, I have removed my downvote. In case you didn't read/copy/plagiarise that post, there is *absolutely no reason to give the attribution to it.* – The Pragmatick Jan 12 '15 at 17:00
  • 1
    Amazing! That did the trick. Surprisingly I actually had a third outer container in my actual implementation that did rotation. I took it out for demonstration purposes here. Having that rotate the x and y containers separately did not fix the issue, but adding rotation to the individual x and y containers definitely smoothed it out. Thanks! – Ryan Jan 14 '15 at 00:14
  • **Update**: rotate(0.002deg) trick does not work anymore FF 41, OSX. Even rotated text gets antialias after the transition / animation stops. – Mikko Ohtamaa Sep 04 '15 at 12:30
  • 1
    Adding **rotate(0.05deg)** saved my life in preventing jumps for dynamically scaled sprite animations. – swolfish Jul 25 '21 at 07:10
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>
Gerard
  • 196
  • 6