动画发生得很完美,图像没有模糊等。但是当它完成时,图像会模糊不清。我正在测试的浏览器是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文件。有任何想法吗?谢谢!
答案 0 :(得分:1)
同样的事情发生在我身上, 如果我添加
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
它不再为我模糊。