Chrome animation makes text blurry

Question

Everything works good on Firefox but chrome shows the animated text blurry. I did everything like -webkit-font-smoothing: subpixel-antialiased; , -webkit-

Answer 1

The best solution for text blurring when adding an animation is add "z-index: 1;" on the style where animation is placed.

.in {
  -webkit-animation: comein 0.5s 1;
  -moz-animation: comein 0.5s 1;
  animation: comein 0.5s 1;
  animation-fill-mode: both;
  z-index: 1;
}