搜索
搜索

CSS @keyframe动画在悬停时闪烁

debugcn 发表于 Dev
20
丁巴特

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

在此处查看站点：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='https://static1.squarespace.com/static/54dfad58e4b0d9caed78a9a9/t/5eb88b57d4d3cc5898fb517d/1589152599764/Brux7.png' >

陪同Afif

如果您很感兴趣，则可以仅使用带有文本笔触的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" >

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使CSS动画在悬停时反转？

来自分类Dev

CSS动画在悬停时扩展按钮文本

来自分类Dev

CSS动画。动画前悬停状态闪烁

来自分类Dev

悬停时CSS过渡闪烁

来自分类Dev

带有悬停的css闪烁动画

来自分类Dev

CSS动画在返回时旋转

来自分类Dev

不悬停时的CSS动画

来自分类Dev

悬停时完成 css 动画

来自分类Dev

悬停时CSS3渐变闪烁

来自分类Dev

悬停时CSS菜单损坏-闪烁效果

来自分类Dev

加载时闪烁的CSS3动画

来自分类Dev

悬停效果闪烁的CSS动画无法在FF中正确显示

来自分类Dev

悬停效果闪烁的CSS动画无法在FF中正确显示

来自分类Dev

CSS动画在暂停时以不同的速率淡入和淡出

来自分类Dev

CSS过渡-动画在开始时无法正常工作

来自分类Dev

CSS：悬停闪烁

来自分类Dev

加载和悬停时的CSS动画

来自分类Dev

悬停时的CSS小动画

来自分类Dev

悬停时锚动画的CSS问题

来自分类Dev

加载和悬停时的CSS动画

来自分类Dev

CSS - 鼠标悬停时动画触发

来自分类Dev

CSS 动画线在悬停时增长

来自分类Dev

动画字母闪烁CSS

来自分类Dev

动画字母闪烁CSS

来自分类Dev

CSS 动画轻微闪烁

来自分类Dev

在悬停上使用CSS变换时闪烁的div

来自分类Dev

鼠标悬停闪烁时的CSS图像交换

来自分类Dev

在 css 动画结束时停止闪烁的光标

来自分类Dev

悬停CSS上的文字闪烁

Related 相关文章

  1. 1

    如何使CSS动画在悬停时反转？

  2. 2

    CSS动画在悬停时扩展按钮文本

  3. 3

    CSS动画。动画前悬停状态闪烁

  4. 4

    悬停时CSS过渡闪烁

  5. 5

    带有悬停的css闪烁动画

  6. 6

    CSS动画在返回时旋转

  7. 7

    不悬停时的CSS动画

  8. 8

    悬停时完成 css 动画

  9. 9

    悬停时CSS3渐变闪烁

  10. 10

    悬停时CSS菜单损坏-闪烁效果

  11. 11

    加载时闪烁的CSS3动画

  12. 12

    悬停效果闪烁的CSS动画无法在FF中正确显示

  13. 13

    悬停效果闪烁的CSS动画无法在FF中正确显示

  14. 14

    CSS动画在暂停时以不同的速率淡入和淡出

  15. 15

    CSS过渡-动画在开始时无法正常工作

  16. 16

    CSS：悬停闪烁

  17. 17

    加载和悬停时的CSS动画

  18. 18

    悬停时的CSS小动画

  19. 19

    悬停时锚动画的CSS问题

  20. 20

    加载和悬停时的CSS动画

  21. 21

    CSS - 鼠标悬停时动画触发

  22. 22

    CSS 动画线在悬停时增长

  23. 23

    动画字母闪烁CSS

  24. 24

    动画字母闪烁CSS

  25. 25

    CSS 动画轻微闪烁

  26. 26

    在悬停上使用CSS变换时闪烁的div

  27. 27

    鼠标悬停闪烁时的CSS图像交换

  28. 28

    在 css 动画结束时停止闪烁的光标

  29. 29

    悬停CSS上的文字闪烁

热门标签

归档