动画发生完美,图像不模糊等。但当它完成时,图像是模糊的,并保持原样。我正在测试的浏览器是Chrome,但不管是哪种浏览器,都会发生这种情况。在闪烁动画中使用的所有图像都不是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文件。有什么想法吗?谢谢!
发布于 2014-12-10 04:33:50
同样的事情正在发生在我身上,如果我加上
-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
它对我来说不再是模糊的。
https://stackoverflow.com/questions/27331767
复制相似问题