CSS 3关键帧动画（不透明度）导致图像最后模糊 [英] CSS 3 Keyframes Animation (Opacity) Causes Images to Blur at the End

问题描述

动画效果非常好，图像没有模糊等。但是当动画结束时，图像就会模糊并保持原状。我正在测试的浏览器是Chrome，但是无论使用哪种浏览器，它都会发生。眨眼动画中使用的所有图像均不按比例缩放，它们以其原始大小显示。这是我的CSS：

The animation happens perfectly, images not blurred etc. But when it finishes, image is blurred and stays like that. The browser I am testing is Chrome, but regardless of browser, it happens. All the images used in blink animation are not scalet, they are shown as in their original size. Here's my 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文件。有任何想法吗？谢谢！

is coming from another .css file. Any ideas? Thanks!

推荐答案

我正在发生同样的事情，如果我添加，则

Same-thing is happening to me, if I add

-webkit-transform：translate3d（0，0，0）;
transform：translation3d（0，0，0）;

对我来说不再模糊。

这篇关于CSS 3关键帧动画（不透明度）导致图像最后模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！