【发布时间】：2021-10-20 21:46:30
【问题描述】：
我的网站上有一个带有动画眼睛的 SVG。眼睛有一个用transform: scale() 制作的眨眼动画。当我现在打开 Chrome 并且眼睛眨眼时，眼睛的路径有时会变得模糊。当我将网站扩展到 90% 时，经常会发生这种情况，但并不一致。我还尝试添加translateZ(0) 和backface-visibility: hidden;，但没有任何帮助。
我能以某种方式解决这个问题吗？
由于它不会一直发生，我不知道这段代码是否会显示我的问题。作为替代方案，我制作了一个 JSFiddle：https://jsfiddle.net/qnwj8uLm/
.info-eyes {
animation-name: info-eyes;
animation-duration: 6s;
animation-iteration-count: infinite;
transform: scale(1) translateZ(0);
transform-origin: 0% 75%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1, 1);
}
.info-iris {
animation-name: info-iris;
animation-duration: 6s;
animation-iteration-count: infinite;
}
@keyframes info-eyes {
0% {transform:scale(1, 1) translateZ(0); }
96% {transform:scale(1, 1) translateZ(0); }
98% {transform:scale(1, 0.1) translateZ(0); }
100% {transform:scale(1, 1) translateZ(0); }
}
@keyframes info-iris {
0% {transform: translate(0%, 0%); opacity: 100%;; }
25% {transform: translate(0%, 8%); opacity: 100%;}
50% {transform: translate(8%, 8%); opacity: 100%;}
75% {transform: translate(8%, 8%); opacity: 100%;}
96% {transform: translate(0%, 0%); opacity: 100%;}
98% {transform: translate(0%, 0%); opacity: 0%;}
100% {transform: translate(0%, 0%); opacity: 100%;}
}
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="81.7" height="75.3" viewBox="0 0 81.7 75.3">
<defs>
<style>
.a {
fill: none;
}
.b {
clip-path: url(#a);
}
.h {
fill: #fff;
}
</style>
<clipPath id="a">
<rect class="a" width="81.7" height="75.3" />
</clipPath>
</defs>
<g transform="translate(40.85 37.65)">
<g class="b" transform="translate(-40.85 -37.65)">
<path class="info-eyes" d="M34.8,52.7a7,7,0,1,1-7-7,7,7,0,0,1,7,7" />
<path class="info-eyes" d="M60.7,52.7a7,7,0,1,1-7-7,7,7,0,0,1,7,7" />
<path class="h info-iris" d="M25.9,50.6c0-2-2.5-2.4-2.5,0s2.5,2,2.5,0" />
<path class="h info-iris" d="M51.6,50.6c0-2-2.5-2.4-2.5,0s2.5,2,2.5,0" />
</g>
</g>
</svg>
</body>【问题讨论】：
-
至少在 Firefox 中我看不到模糊。但是你可以尝试另一种动画，使用像anime.js或GSAP这样的js库。或者试试 SMIL 原生动画。
标签： html css google-chrome svg css-animations