CSS 3 Keyframes Анимация (непрозрачность) Заставляет изображения размываться в конце

Question

Анимация происходит отлично, изображения не размыты и т. Д. Но когда она заканчивается, изображение размывается и остается таким. Браузер, который я тестирую, это Chrome, но независимо от браузера это происходит. Все изображения, используемые в мигающей анимации, не являются скалярными, они показаны как в их первоначальном размере. Вот мой CSS:

@charset "UTF-8"; 

@-webkit-keyframes blink { 
    0% { 
     opacity:0; 
    } 
    11%, 22% { 
     opacity:1; 
    } 
    33%, 100% { 
     opacity:0; 
    } 
} 

@-moz-keyframes blink { 
    0% { 
     opacity:0; 
    } 
    11%, 22% { 
     opacity:1; 
    } 
    33%, 100% { 
     opacity:0; 
    } 
} 

@-o-keyframes blink { 
    0% { 
     opacity:0; 
    } 
    11%, 22% { 
     opacity:1; 
    } 
    33%, 100% { 
     opacity:0; 
    } 
} 

@keyframes blink { 
    0% { 
     opacity:0; 
    } 
    11%, 22% { 
     opacity:1; 
    } 
    33%, 100% { 
     opacity:0; 
    } 
} 

.blink { 
    opacity:0; 

    -webkit-animation-duration: 6s; 
    -moz-animation-duration: 6s; 
    -o-animation-duration: 6s; 
    animation-duration: 6s; 

    -webkit-animation-name:blink; 
    -moz-animation-name:blink; 
    -o-animation-name:blink; 
    animation-name:blink; 

    -webkit-animation-fill-mode: forwards; 
    -moz-animation-fill-mode: forwards; 
    -o-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
} 

.delay-1{ 
    -webkit-animation-delay: 1s; 
    -moz-animation-delay: 1s; 
    -o-animation-delay: 1s; 
    animation-delay: 1s; 
} 

.delay-3{ 
    -webkit-animation-delay: 3s; 
    -moz-animation-delay: 3s; 
    -o-animation-delay: 3s; 
    animation-delay: 3s; 
} 

.delay-5{ 
    -webkit-animation-delay: 5s; 
    -moz-animation-delay: 5s; 
    -o-animation-delay: 5s; 
    animation-delay: 5s; 
} 

.loop { 
    -webkit-animation-iteration-count: infinite; 
    -moz-animation-iteration-count: infinite; 
    -o-animation-iteration-count: infinite; 
    animation-iteration-count: infinite; 
} 

.timingEaseIn { 
    -webkit-animation-timing-function: ease-in; 
    -moz-animation-timing-function: ease-in; 
    -o-animation-timing-function: ease-in; 
    animation-timing-function: ease-in; 
} 

И

-webkit-animation-fill-mode:both; 
-moz-animation-fill-mode:both; 
-o-animation-fill-mode:both; 
animation-fill-mode:both; 

приходит из другого файла .css. Есть идеи? Благодаря!

Answer 1

То же самое, что происходит со мной, если я добавить

-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);

он больше не размывает для меня.