CSS 3关键帧动画（不透明度）使图像在最终模糊(CSS 3 Keyframes Animation

动画完美地发生，图像是否清晰等等。但是当它完成，图像模糊，并保持这样的。 我测试浏览器是由铬，但是无论浏览器的，它发生。 在闪烁的动画中使用的所有图像都没有scalet，它们被显示为原始大小。 这里是我的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);

它不再模糊了我。

文章来源: CSS 3 Keyframes Animation (Opacity) Causes Images to Blur at the End