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

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. 的样式

出于隐私原因，浏览器严格限制您可以应用的样式 使用这个伪类选择的元素：只有颜色， 背景颜色，边框颜色，边框底部颜色， 边框左颜色，边框右颜色，边框顶部颜色， 轮廓颜色、列规则颜色、填充和描边。

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

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

从 color 属性中移除 -webkit- 和 -ms- 前缀

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

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