使用CSS3动画模仿闪烁标记

Question

我真的想让一段文字在不使用javascript或文本装饰的情况下使老式风格闪烁.

没有过渡,只有*闪烁*,*闪烁*,*闪烁*!

---

编辑:这与那个问题不同,因为我要求在没有连续转换的情况下闪烁,而其他问题的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>

JSfiddle演示

Answer 3

试试这个CSS

@keyframes blink {  
  0% { color: red; }
  100% { color: black; }
}
@-webkit-keyframes blink {
  0% { color: red; }
  100% { color: black; }
}
.blink {
  -webkit-animation: blink 1s linear infinite;
  -moz-animation: blink 1s linear infinite;
  animation: blink 1s linear infinite;
} 

This is <span class="blink">blink</span>

您需要浏览器/供应商特定的前缀:http://jsfiddle.net/es6e6/1/.

Answer 4

实际上没有必要visibility或opacity- 你可以简单地使用color,它具有保持任何"闪烁"仅为文本的好处:

blink {
    display: inline;
    color: inherit;
    animation: blink 1s steps(1) infinite;
    -webkit-animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { color: transparent; } }
@-webkit-keyframes blink { 50% { color: transparent; } }

Here is some text, <blink>this text will blink</blink>, this will not.

小提琴:http://jsfiddle.net/2r8JL/

Answer 5

我为此会下地狱:

=keyframes($name)
  @-webkit-keyframes #{$name}
    @content
  @-moz-keyframes #{$name}
    @content
  @-ms-keyframes #{$name}
    @content
  @keyframes #{$name}
    @content


+keyframes(blink)
  25%
    zoom: 1
    opacity: 1

  65%
    opacity: 1 

  66%
    opacity: 0

  100%
    opacity: 0

body
  font-family: sans-serif
  font-size: 4em
  background: #222
  text-align: center

  .blink
    color: rgba(#fff, 0.9)
    +animation(blink 1s 0s reverse infinite)
    +transform(translateZ(0))

.table
  display: table
  height: 5em
  width: 100%
  vertical-align: middle

  .cell
    display: table-cell
    width: 100%
    height: 100%
    vertical-align: middle

http://codepen.io/anon/pen/kaGxC(用波旁威士忌)

Answer 6

另一种变化

.blink {
    -webkit-animation: blink 1s step-end infinite;
            animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink { 50% { visibility: hidden; }}
        @keyframes blink { 50% { visibility: hidden; }}

This is <span class="blink">blink</span>