在CSS3动画中模仿眨眼标签

Question

我真的很想让一段文字在不使用JavaScript或文字修饰的情况下闪烁出旧式风格。没有过渡，只有* blink *，* blink *，* blink *！编辑：这与该问题不同，因为我要求没有连续过渡的眨眼，而其他问题的OP问如何用连续过渡来代替眨眼

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.

Answer 2

让我向您展示一些技巧。

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

您真正需要做的是：

@keyframes blink {

  50% {

    opacity: 0.0;

  }

}

@-webkit-keyframes blink {

  50% {

    opacity: 0.0;

  }

}

.blink {

  animation: blink 1s step-start 0s infinite;

  -webkit-animation: blink 1s step-start 0s infinite;

}

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