CSS@keyframe动画在悬停时闪烁

寻求帮助！我为悬停状态制作的关键帧动画存在闪烁问题。我正在使用Squarespace并向站点添加自定义代码。设计师的交易，所以请原谅我的代码，我卡住了

在此处查看网站：

img{
最大宽度：100%；
}
img：悬停{
不透明度：1！重要；
动画：磨牙症1s无限；
动画计时功能：步数（100）；
}
@磨牙症{
0%{内容：url（'https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b57d4d3cc5898fb517d/1589152599764/Brux7.png'); } 
8%{内容：url（'https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b54655c7270e62be6c0/1589152597813/Brux6.png'); }
16%{内容：url（'https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b51c673416ea88b386c/1589152593259/Brux5.png');}
24%{内容：url（'https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b4d2ffa577e027396e2/1589152589870/Brux4.png'); }
32%{内容：url（'https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b4a0f826758a3cff34f/1589152586700/Brux3.png'); }
40%{内容：url（'https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b47b2acbe6aa4f0715f/1589152583216/Brux2.png'); }
48%{内容：url（'https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b4440f56e45feecd847/1589152580316/Brux1.png'); }
50%{内容：url（'https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b4440f56e45feecd847/1589152580316/Brux1.png'); }
58%{内容：url（'https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b47b2acbe6aa4f0715f/1589152583216/Brux2.png'); }
66%{内容：url（'https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b4a0f826758a3cff34f/1589152586700/Brux3.png'); }
74%{内容：url（'https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b4d2ffa577e027396e2/1589152589870/Brux4.png'); }
82%{内容：url（'https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b51c673416ea88b386c/1589152593259/Brux5.png'); }
90%{内容：url（'https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b54655c7270e62be6c0/1589152597813/Brux6.png'); }
98%{内容：url（'https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b57d4d3cc5898fb517d/1589152599764/Brux7.png'); }
100%{内容：url（'https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b57d4d3cc5898fb517d/1589152599764/Brux7.png'); }
}
身体{
背景：#000；
}

---

如果您感兴趣，您可以仅使用带有文本笔划的CSS来近似此值。您只需使用正确的字体系列进行更新：

正文{
背景：#000
}
.标志{
字体系列：monospace；
文本转换：大写；
字体大小：60px；
颜色：#fff；
动画：bruxism 1s无限步（6）；
}
@磨牙症{
0% {
-webkit文本笔划：1px#fff；
文字笔划：1px#fff；
}
20% {
-webkit文本笔划：2px#fff；
文字笔划：2px#fff；
}
40% {
-webkit文本笔划：3px#fff；
文字笔划：3px#fff；
}
60% {
-webkit文本笔划：4px#fff；
文字笔划：4px#fff；
}
80% {
-webkit文本笔划：5px#fff；
文字笔划：5px#fff；
}
100% {
-webkit文本笔划：6px#fff；
文字笔划：6px#fff；
}
}

---

bruxism

所有图像都将加载到悬停上。你需要在页面加载时加载它们，以避免出现这种情况。有很多图像，根据我加载的少数图像，它们看起来都相当大。按需加载这些内容需要浏览器时间。如果可能的话，我会尽量不使用图像，否则你（和加载页面的用户）会占用大量带宽——对可访问性、加载时间等不利