使用 CSS3 动画模仿闪烁标签

Question

我真的很想在不使用 javascript 或 text-decoration 的情况下让一段文字闪烁出老派风格。

没有转换，只有*眨眼*、*眨眼*、*眨眼*！

---

这与 那个问题 不同，因为我要求在没有连续转换的情况下 _闪烁_，而其他问题的 OP 询问如何 用连续转换 替换 闪烁

原文由 m93a 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

最初的 Netscape <blink> 占空比为 80%。这非常接近，虽然真正的 <blink> 只影响文本：

 .blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

 This is <span class="blink">blinking</span> text.

您可以 在此处找到有关关键帧动画的 更多信息。

原文由 Neil 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

让我告诉你一个小技巧。

正如 Arkanciscan 所说，您可以使用 CSS3 过渡。但他的解决方案看起来与原始标签不同。

你真正需要做的是：

 @keyframes blink {
  50% {
    opacity: 0.0;
  }
}
.blink {
  animation: blink 1s step-start 0s infinite;
}

 <span class="blink">Blink</span>

JSfiddle 演示

原文由 m93a 发布，翻译遵循 CC BY-SA 4.0 许可协议