CSS @keyframe 动画在悬停时闪烁
Posted
技术标签:
【中文标题】CSS @keyframe 动画在悬停时闪烁【英文标题】：CSS @keyframe animation flickers on hover 【发布时间】：2020-08-28 21:29:24 【问题描述】：寻求帮助！我为悬停状态制作的关键帧动画出现闪烁问题。我正在使用 Squarespace 并向网站添加自定义代码。行业设计师，请原谅我的代码，我被卡住了。
在此处查看网站：https://dingbat.co/new-fonts
Flicker Issue on Hover
img
max-width:100%;
img:hover
opacity: 1 !important;
animation: bruxism 1s infinite;
animation-timing-function: steps(100);
@keyframes bruxism
0% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b57d4d3cc5898fb517d/1589152599764/Brux7.png');
8% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b54655c7270e62be6c0/1589152597813/Brux6.png');
16% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b51c673416ea88b386c/1589152593259/Brux5.png');
24% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b4d2ffa577e027396e2/1589152589870/Brux4.png');
32% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b4a0f826758a3cff34f/1589152586700/Brux3.png');
40% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b47b2acbe6aa4f0715f/1589152583216/Brux2.png');
48% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b4440f56e45feecd847/1589152580316/Brux1.png');
50% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b4440f56e45feecd847/1589152580316/Brux1.png');
58% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b47b2acbe6aa4f0715f/1589152583216/Brux2.png');
66% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b4a0f826758a3cff34f/1589152586700/Brux3.png');
74% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b4d2ffa577e027396e2/1589152589870/Brux4.png');
82% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b51c673416ea88b386c/1589152593259/Brux5.png');
90% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b54655c7270e62be6c0/1589152597813/Brux6.png');
98% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b57d4d3cc5898fb517d/1589152599764/Brux7.png');
100% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b57d4d3cc5898fb517d/1589152599764/Brux7.png');
body
background:#000;
<img src='https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b57d4d3cc5898fb517d/1589152599764/Brux7.png' >【问题讨论】：
所有图片都将在悬停时加载。您需要在页面加载时加载它们以避免这种情况 有很多图像，根据我加载的少数图像，它们看起来都很大。浏览器需要时间来按需加载这些内容。如果可能的话，我会尝试不使用图像，否则您（和加载页面的用户）将使用大量带宽 - 不利于可访问性、加载时间等 【参考方案1】：如果您有兴趣，您可以仅使用带有 text-stroke 的 CSS 来近似此值。您只需要使用正确的字体系列进行更新：
body
background:#000
.logo
font-family:monospace;
text-transform:uppercase;
font-size:60px;
color:#fff;
animation: bruxism 1s infinite steps(6);
@keyframes bruxism
0%
-webkit-text-stroke:1px #fff;
text-stroke:1px #fff;
20%
-webkit-text-stroke:2px #fff;
text-stroke:2px #fff;
40%
-webkit-text-stroke:3px #fff;
text-stroke:3px #fff;
60%
-webkit-text-stroke:4px #fff;
text-stroke:4px #fff;
80%
-webkit-text-stroke:5px #fff;
text-stroke:5px #fff;
100%
-webkit-text-stroke:6px #fff;
text-stroke:6px #fff;
<div class="logo">bruxism</div>或者确保一开始就加载所有图像，以使它们在悬停时准备好并避免闪烁：
我考虑了一个空的伪元素，我将所有图像用作背景以强制浏览器获取它们
html:before
content:""; background:url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b57d4d3cc5898fb517d/1589152599764/Brux7.png'), url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b54655c7270e62be6c0/1589152597813/Brux6.png'), url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b51c673416ea88b386c/1589152593259/Brux5.png'), url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b4d2ffa577e027396e2/1589152589870/Brux4.png'), url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b4a0f826758a3cff34f/1589152586700/Brux3.png'), url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b47b2acbe6aa4f0715f/1589152583216/Brux2.png'), url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b4440f56e45feecd847/1589152580316/Brux1.png'), url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b4440f56e45feecd847/1589152580316/Brux1.png'), url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b47b2acbe6aa4f0715f/1589152583216/Brux2.png'), url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b4a0f826758a3cff34f/1589152586700/Brux3.png'), url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b4d2ffa577e027396e2/1589152589870/Brux4.png'), url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b51c673416ea88b386c/1589152593259/Brux5.png'), url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b54655c7270e62be6c0/1589152597813/Brux6.png'), url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b57d4d3cc5898fb517d/1589152599764/Brux7.png'), url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b57d4d3cc5898fb517d/1589152599764/Brux7.png');
img
max-width:100%;
img:hover
opacity: 1 !important;
animation: bruxism 1s infinite;
animation-timing-function: steps(100);
@keyframes bruxism
0% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b57d4d3cc5898fb517d/1589152599764/Brux7.png');
8% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b54655c7270e62be6c0/1589152597813/Brux6.png');
16% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b51c673416ea88b386c/1589152593259/Brux5.png');
24% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b4d2ffa577e027396e2/1589152589870/Brux4.png');
32% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b4a0f826758a3cff34f/1589152586700/Brux3.png');
40% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b47b2acbe6aa4f0715f/1589152583216/Brux2.png');
48% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b4440f56e45feecd847/1589152580316/Brux1.png');
50% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b4440f56e45feecd847/1589152580316/Brux1.png');
58% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b47b2acbe6aa4f0715f/1589152583216/Brux2.png');
66% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b4a0f826758a3cff34f/1589152586700/Brux3.png');
74% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b4d2ffa577e027396e2/1589152589870/Brux4.png');
82% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b51c673416ea88b386c/1589152593259/Brux5.png');
90% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b54655c7270e62be6c0/1589152597813/Brux6.png');
98% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b57d4d3cc5898fb517d/1589152599764/Brux7.png');
100% content: url('https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b57d4d3cc5898fb517d/1589152599764/Brux7.png');
body
background:#000;
<img src="https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b57d4d3cc5898fb517d/1589152599764/Brux7.png" >【讨论】：
以上是关于CSS @keyframe 动画在悬停时闪烁的主要内容，如果未能解决你的问题，请参考以下文章