用 CSS3 动画模仿闪烁标签答案

【问题标题】：Imitating a blink tag with CSS3 animations用 CSS3 动画模仿闪烁标签
【发布时间】：2012-12-06 23:15:39
【问题描述】：

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

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

这与that question 不同，因为我要求闪烁没有连续过渡，而其他问题的 OP 询问如何替换闪烁连续过渡

【问题讨论】：

The best answer 不幸的是，我发现它已被原始发帖人@m93a 删除，因此尚无法投票。我认为答案应该不被删除和赞成，因为它是产生最佳眨眼效果的最简单的解决方案，它适用于all current versions of major browsers。您还可以在 Emulating <blink> using WebKit CSS3 animation 阅读有关同一解决方案的简短博客文章。
我不明白的是为什么这里的每个答案似乎都有@-webkit-keyframes 规则在无前缀@keyframes 规则之后，有些甚至有@987654328 @ 声明在无前缀之后。
@BoltClock：这是因为 CSS3 动画相对较新，在 Webkit 浏览器中还不稳定。所谓的“前缀”是为那些想要使用动画的开发者准备的，即使它们不稳定且未完成。
@m93a：我知道，但我问为什么它们被放在无前缀规则之后而不是它之前（显然我没有在我的原始评论中包含该措辞，我的错误） .
How to make blinking/flashing text with css3?的可能重复

标签： html css css-animations blink

【解决方案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 &lt;span class="blink"&gt;blinking&lt;/span&gt; text.

你可以找到更多关于Keyframe Animations here的信息。

【讨论】：

是的，它更简单。您可以添加 webkit 前缀以使其在 Chrome 和 Safari 中运行。
如果没有 webkit 前缀，这可能无法在 Chrome/safari 上运行。
我喜欢做的是，不是让眨眼成为一个类，而是让眨眼成为一个标签（blink { animation: blink 1s steps(5, start) infinite; -webkit-animation: blink 1s steps(5, start) infinite; }）。这样，您可以只使用<blink> 标签，而不是<span class="blink"> =)
注意：这只是 OP 要求的“ 模仿”。不适用于 color 属性作为“开-关”-blink-animation。

【解决方案2】：

让我告诉你一个小技巧。

作为 Arkanciscan said，您可以使用 CSS3 过渡。但他的解决方案看起来与原来的标签不同。

你真正需要做的是：

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

&lt;span class="blink"&gt;Blink&lt;/span&gt;

JSfiddle Demo

【讨论】：

正如所写，这个答案确实适用于current versions of Firefox, Chrome, Safari, and IE。
@m93a：0% 100% { opacity: 1.0; } 部分似乎是多余的，因为它们是默认的，不是吗？
如果你想给blink元素本身设置样式，你可以使用上面的（使用blink而不是.blink）并将display: block添加到CSS（我认为这是一个块元素）。让我们把邪恶带回来！ :-)

【解决方案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 &lt;span class="blink"&gt;blink&lt;/span&gt;

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

【讨论】：

没有什么像 -ms-animation 或 -o-animation 和 -moz-animation 仅在版本 15 中，现在不要使用它。查看 caniuse.com 以了解实际支持。抱歉，我不会接受这个问题 :( PS：您可以在其他人的答案上使用“编辑”。
这只是我的老坏习惯 - 为所有新的 CSS3 属性添加后缀。更新答案。
这不是“blink”而是“blink-fadeOut”。

【解决方案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, &lt;blink&gt;this text will blink&lt;/blink&gt;, this will not.

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

【讨论】：

太棒了！这是唯一提供纯文本闪烁的解决方案。所有其他解决方案也会闪烁元素的背景。要进行测试，请使用蓝底白字的<span> 和绿底白字的<body>。只有在这个解决方案中，蓝色跨度背景才不会闪烁。
这个解决方案是最好的，因为选中时文本不会闪烁。有利于可访问性。

【解决方案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（波旁威士忌）

【讨论】：

您的 codepen 产生了一个Undefined mixin 'experimental'. 错误，因此看起来它不会编译并显示闪烁动画。
这就是他下地狱的原因。

【解决方案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 &lt;span class="blink"&gt;blink&lt;/span&gt;

【讨论】：

【解决方案7】：

如果你想要平滑闪烁的文本或类似的东西，你可以使用以下代码：

 .blinking {
    -webkit-animation: 1s blink ease infinite;
    -moz-animation: 1s blink ease infinite;
    -ms-animation: 1s blink ease infinite;
    -o-animation: 1s blink ease infinite;
    animation: 1s blink ease infinite;
  }

  @keyframes "blink" {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  @-moz-keyframes blink {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  @-webkit-keyframes "blink" {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  @-ms-keyframes "blink" {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  @-o-keyframes "blink" {

    from,
    to {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

&lt;span class="blinking"&gt;I am smoothly blinking&lt;/span&gt;

【讨论】：

【解决方案8】：

在我的情况下，它以 1 秒的间隔闪烁文本。

.blink_me {
  color:#e91e63;
  font-size:140%;
  font-weight:bold;
  padding:0 20px 0  0;
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% { opacity: 0.4; }
}

【讨论】：

【解决方案9】：

如果你想要一些发光效果使用这个

@keyframes blink {
  50% {
    opacity: 0.0;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
  }
}

atom-text-editor::shadow  .bracket-matcher .region {
    border:none;
    background-color: rgba(195,195,255,0.1);
    border-bottom: 1px solid rgb(155,155,255);
    box-shadow: 0px 0px 9px 4px rgba(155,155,255,0.1);
    border-radius: 3px;
    animation: blink 2s steps(115, start) infinite;
    -webkit-animation: blink 2s steps(115, start) infinite;
}

【讨论】：

【解决方案10】：

请为您的代码找到以下解决方案。

@keyframes blink {
  50% {
    color: transparent;
  }
}

.loader__dot {
  animation: 1s blink infinite;
}

.loader__dot:nth-child(2) {
  animation-delay: 250ms;
}

.loader__dot:nth-child(3) {
  animation-delay: 500ms;
}

Loading &lt;span class="loader__dot"&gt;.&lt;/span&gt;&lt;span class="loader__dot"&gt;.&lt;/span&gt;&lt;span class="loader__dot"&gt;.&lt;/span&gt;

【讨论】：