CSS3 Animation Reason for Poor Text Rendering

Question

I am trying to create a CSS3 animation on a background image. Everything works well, the problem is that in Chrome the text ends up blurry during the animation:

During the animation:

Turn off animation:

As you can see, the text rendering is great when the animation is turned off, I know that the usual problem is with text rendering, but I can’t understand why the rendering is bad in Chrome when animating. I'm not sure what I really can do about it. I tested the animation in Firefox and IE, and everything is fine. By the way, I am working on Windows.

Firefox:

IE:

EDIT

.bg-div {
    position: fixed;
    width: 110%;
    height: 110%;
    transform: translate(-5%, -5%);
    -moz-transform: translate(-5%, -5%) rotate(0.02deg); /* rotation to solve choppy animation on Firefox */
    -ms-transform: translate(-5%, -5%);
    background-image: url('images/colour-test.jpg');
    background-size: cover;
    -webkit-animation: bg-animation 10s linear infinite;
    -moz-animation: bg-animation 10s linear infinite;
    -ms-animation: bg-animation 10s linear infinite;
}

@-webkit-keyframes bg-animation {
    25% { transform: translate(-5.5%, -5.5%); }
    50% { transform: translate(-5.3%, -4.9%); }
    75% { transform: translate(-4.8%, -4.3%); }
}
@-moz-keyframes bg-animation {
    25% { -moz-transform: translate(-5.5%, -5.5%) rotate(0.02deg); }
    50% { -moz-transform: translate(-5.3%, -4.9%) rotate(0.02deg); }
    75% { -moz-transform: translate(-4.8%, -4.3%) rotate(0.02deg); }
}
@-ms-keyframes bg-animation {
    25% { -ms-transform: translate(-5.5%, -5.5%); }
    50% { -ms-transform: translate(-5.3%, -4.9%); }
    75% { -ms-transform: translate(-4.8%, -4.3%); }
}
.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 65%;
    text-align: center;
}

After reading the question and answer posted in the comments, I tried to add -webkit-font-smoothing: subpixel-antialiased;in .bg-div, but that didn't make any difference.

EDIT 2

, , , -, position: fixed . , , , position: fixed, , . , , , .

Answer 1

, transform .content. , div.

:

• , transform: translate(-50%, -50%)

• , , , , margin: auto .

.content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 50%;
  height: 65%;
  text-align: center;
}

body { margin: 0 auto; width: 500px }

.bg-div {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 800px;
  height: 800px;
  transform: translate(-5%, -5%);
  background: url('http://www.placehold.it/800') no-repeat;
  -webkit-animation: bg-animation 2s linear infinite;
  animation: bg-animation 2s linear infinite;
}
@-webkit-keyframes bg-animation {
  0% {
    transform: translate(-5.5%, -5.5%);
  }
  50% {
    transform: translate(-5%, -5%);
  }
  100% {
    transform: translate(-5.5%, -5.5%);
  }
}
@keyframes bg-animation {
  0% {
    transform: translate(-5.5%, -5.5%);
  }
  50% {
    transform: translate(-5%, -5%);
  }
  100% {
    transform: translate(-5.5%, -5.5%);
  }
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 50%;
  height: 65%;
  text-align: center;
}

<div class="bg-div"></div>

<div class="content">
  <h1>This looks better</h1>
  <input value="Text" />
</div>

Hide result