在CSS3动画中模仿眨眼标签

Question

我真的很想让一段文字在不使用JavaScript或文字修饰的情况下闪烁出旧式风格。

没有过渡，只有* blink *，* blink *，* blink *！

编辑：这与该问题不同，因为我要求没有连续过渡的眨眼，而其他问题的OP问如何用连续过渡来代替眨眼

Answer 1

最初的Netscape <blink>具有80％的占空比。这很接近，尽管实数<blink>只影响文本：.blink {&nbsp; animation: blink-animation 1s steps(5, start) infinite;&nbsp; -webkit-animation: blink-animation 1s steps(5, start) infinite;}@keyframes blink-animation {&nbsp; to {&nbsp; &nbsp; visibility: hidden;&nbsp; }}@-webkit-keyframes blink-animation {&nbsp; to {&nbsp; &nbsp; visibility: hidden;&nbsp; }}This is <span class="blink">blinking</span> text.

Answer 2

让我向您展示一些技巧。正如Arkanciscan 所说，您可以使用CSS3过渡。但是他的解决方案看起来与原始标签不同。您真正需要做的是：@keyframes blink {&nbsp; 50% {&nbsp; &nbsp; opacity: 0.0;&nbsp; }}@-webkit-keyframes blink {&nbsp; 50% {&nbsp; &nbsp; opacity: 0.0;&nbsp; }}.blink {&nbsp; animation: blink 1s step-start 0s infinite;&nbsp; -webkit-animation: blink 1s step-start 0s infinite;}<span class="blink">Blink</span>