Keyframe Animation macht Bild verschwommen

Question

Ich habe Elemente mit einem Hintergrundbild. Ich verwende eine Keyframe-Animation, um diese Elemente beim Laden der Seite zu vergrößern. Die Elemente werden verschwommen und passen sich ca. 5 Sekunden nach dem Wachstum an. Kennt jemand eine Lösung dafür? Unten ist mein Code und was habe ich versucht:

https://jsfiddle.net/ozy4dpk0/

Animation:

@keyframes animation { 
    0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
    4.2% { transform: matrix3d(2.099, 0, 0, 0, 0, 1.549, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
    8.31% { transform: matrix3d(2.768, 0, 0, 0, 0, 1.884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
    12.51% { transform: matrix3d(3.064, 0, 0, 0, 0, 2.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
    16.62% { transform: matrix3d(3.127, 0, 0, 0, 0, 2.063, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
    27.73% { transform: matrix3d(3.026, 0, 0, 0, 0, 2.013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
    38.84% { transform: matrix3d(2.995, 0, 0, 0, 0, 1.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
    61.06% { transform: matrix3d(3, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
    83.28% { transform: matrix3d(3, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
    100% { transform: matrix3d(3, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
} 

css:

#two-box { 
    background-image: url("your-brand-here.jpg"); 
    -webkit-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
    background-size: 100% 100%; 
    image-rendering: -webkit-optimize-contrast; 
    border-style: solid; 
    border-width: 2px; 
    border-color: #7f8c8d; 
} 

html:

<div id="two-box" class="first-row-styles animation-target"></div> 

Answer 1

Versuchen Sie, diese und fügte hinzu:

-webkit-backface-visibility: hidden; 
-webkit-transform: translateZ(0) scale(1.0, 1.0);