用 CSS3 动画模仿闪烁标签
Posted
技术标签:
【中文标题】用 CSS3 动画模仿闪烁标签【英文标题】：Imitating a blink tag with CSS3 animations 【发布时间】：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?的可能重复
【参考方案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.你可以找到更多关于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 要求的“【参考方案2】：
让我告诉你一个小技巧。
作为 Arkanciscan said，您可以使用 CSS3 过渡。但他的解决方案看起来与原来的标签不同。
你真正需要做的是：
@keyframes blink
50%
opacity: 0.0;
.blink
animation: blink 1s step-start 0s infinite;
<span class="blink">Blink</span>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 <span class="blink">blink</span> 您需要浏览器/供应商特定的前缀：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, <blink>this text will blink</blink>, 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 <span class="blink">blink</span>【讨论】：
【参考方案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;
<span class="blinking">I am smoothly blinking</span>【讨论】：
【参考方案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 <span class="loader__dot">.</span><span class="loader__dot">.</span><span class="loader__dot">.</span>【讨论】：
以上是关于用 CSS3 动画模仿闪烁标签的主要内容，如果未能解决你的问题，请参考以下文章
css3 序列帧动画制作出来有4条白边，求大神告知怎么去掉，或者怎么处理下，在线等