首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >CSS 3关键帧动画(不透明度)导致图像在结尾模糊

CSS 3关键帧动画(不透明度)导致图像在结尾模糊
EN

Stack Overflow用户
提问于 2014-12-06 20:38:23
回答 1查看 959关注 0票数 1

动画发生完美,图像不模糊等。但当它完成时,图像是模糊的,并保持原样。我正在测试的浏览器是Chrome,但不管是哪种浏览器,都会发生这种情况。在闪烁动画中使用的所有图像都不是scalet,它们以原始大小显示。这是我的CSS:

代码语言:javascript
复制
@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;
}

代码语言:javascript
复制
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;

来自另一个.css文件。有什么想法吗?谢谢!

EN

回答 1

Stack Overflow用户

发布于 2014-12-10 04:33:50

同样的事情正在发生在我身上,如果我加上

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

它对我来说不再是模糊的。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/27331767

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档