问题
Looking for help! I'm having a flickering issue with the keyframe animation I made for the hover state. I'm using Squarespace and adding custom code to the site. Designer by trade so forgive my code, I'm stuck.
View site here: 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:
If you are intrested you can approximate this using only CSS with text-stroke. You simply need to update with the correct font-family:
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>Or make sure to load all your images initially to make them ready on hover and avoid the flicker:
I considered an empty pseudo element where I apply all the images as background to force the browser to fetch them
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" >来源：https://stackoverflow.com/questions/61761913/css-keyframe-animation-flickers-on-hover