Firefox CSS Animation Smoothing (sub-pixel smoothing)

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

Answer 1

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;
}