用CSS3animation模仿闪烁标签

我真的想让一段文字在不使用JavaScript或文本装饰的情况下闪烁旧派风格。

没有转换，只有*闪烁*，*闪烁*，*闪烁*！

---

编辑 ：这是不同的问题，因为我要求闪烁没有连续过渡，而OP的其他问题问如何replace闪烁连续过渡

Answer 1

原来的网景<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转换。 但他的解决scheme看起来不同于原来的标签。

你真正需要做的是这样的：

 @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> 

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> 

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. 

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> 

Answer 7

这是在我的情况下工作闪烁文字在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; } } 

Answer 8

请为您的代码find下面的解决scheme。

 @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>