动画效果完美,图像不模糊等。但是当它完成时,图像模糊并保持这种状态。我正在测试的浏览器是 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 文件。有任何想法吗?谢谢!
最佳答案
同样的事情发生在我身上, 如果我添加
-webkit-transform: translate3d(0, 0, 0);
变换:translate3d(0, 0, 0);
它对我来说不再模糊。
关于html - CSS 3 关键帧动画(不透明度)导致图像最后模糊,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27331767/