沃梦达 / 编程问答 / 前端问题 / 正文

CSS @keyframe 动画在悬停时闪烁

前端问题
2022-01-01

CSS @keyframe animation flickers on hover(CSS @keyframe 动画在悬停时闪烁)

本文介绍了CSS @keyframe 动画在悬停时闪烁的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

寻求帮助！我为悬停状态制作的关键帧动画出现闪烁问题.我正在使用 Squarespace 并向网站添加自定义代码.行业设计师，请原谅我的代码，我被卡住了.

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.

在此处查看网站:https://dingbat.co/new-fonts

悬停时闪烁问题

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="aHR0cHM6Ly9zdGF0aWMxLnNxdWFyZXNwYWNlLmNvbS9zdGF0aWMvNTRkZmFkNThlNGIwZDljYWVkNzhhOWE5L3QvNWViODhiNTdkNGQzY2M1ODk4ZmI1MTdkLzE1ODkxNTI1OTk3NjQvQnJ1eDcucG5n" >

推荐答案

如果您有兴趣，可以仅使用带有 text-stroke 的 CSS 来近似.您只需要使用正确的字体系列进行更新:

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="aHR0cHM6Ly9zdGF0aWMxLnNxdWFyZXNwYWNlLmNvbS9zdGF0aWMvNTRkZmFkNThlNGIwZDljYWVkNzhhOWE5L3QvNWViODhiNTdkNGQzY2M1ODk4ZmI1MTdkLzE1ODkxNTI1OTk3NjQvQnJ1eDcucG5n" >

这篇关于CSS @keyframe 动画在悬停时闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

本文标题为：CSS @keyframe 动画在悬停时闪烁

上一篇： 在子 li 上设置父 li:hover
下一篇： 带有 getElementByClassName 的 innerHTML 不起作用
猜你喜欢
最新文章
热门文章
基础教程
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2