Question

我为菜单栏中的一个元素添加了一个闪烁动画。它在Mozilla中完美运行，但在Chrome中它在点击后停止，只清除浏览器数据有帮助。有时甚至不解决它。

你能帮忙吗？它也不适用于IE，但这并不重要。

.menu-box #menu-item-368 a {
  animation-name: blink;
  animation-duration: 500ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  -webkit-animation-name: blink;
  -webkit-animation-duration: 500ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -ms-animation-name: blink;
  -ms-animation-duration: 500ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-direction: alternate;
}
@keyframes blink {
   from {
      color: white;
   }
   to {
      color: red;
   }
}
 @-webkit-keyframes blink {
   from {
      -webkit-color: white;
   }
   to {
      -webkit-color: red;
   }
}
 @-ms-keyframes blink {
   from {
      -ms-color: white;
   }
   to {
      -ms-color: red;
   }
}

Answer 1

点击链接时链接会停止闪烁，因为正在应用浏览器的默认:visited样式且大多数浏览器限制:visited pseudo-class.的样式

出于隐私原因，浏览器严格限制您可以应用的样式使用这个伪类选择的元素：只有颜色，背景色，边框色，边框底色， border-left-color，border-right-color，border-top-color， outline-color，column-rule-color，fill和stroke。

要解决此问题，您可以为链接的不透明度设置动画。

a {
  animation: blink 500ms infinite alternate;
}
@keyframes blink {
  from {
    opacity: 0;
  }
  to {
    opacity: 1
  }
}

<a href="#">hello world</a>

一些旁注......

我的示例使用了short-hand animation property。

为了简洁起见，我也删除了前缀，因为大多数现代浏览器不再需要它们。

谨慎使用闪烁文字，请务必小心谨慎，或者根本不使用。许多用户觉得它很烦人。 The <blink> tag was depreciated for a good reason

Answer 2

从颜色属性

中删除-webkit-和-ms-前缀

@-webkit-keyframes blink {
   from {
      color: white;
   }
   to {
      color: red;
   }
}
 @-ms-keyframes blink {
   from {
      color: white;
   }
   to {
      color: red;
   }
}

检查是否需要前缀检查caniuse.com

动画闪烁在Chrome上无法正常工作

2 个答案: