使用 CSS3动画模仿眨眼标记

小开

给你看个小把戏。

作为阿肯色州的说，你可以使用 CSS3转场。但他的解决方案看起来不同于原来的标签。

你真正需要做的是:

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

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

JSfiddle Demo

小开

试试这个 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>

You need browser/vendor specific prefixes: http://jsfiddle.net/es6e6/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.

You can find more info about Keyframe Animations here.

小开

我会为此下地狱的:

=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 (波旁威士忌)

小开

实际上不需要 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.

Fiddle: http://jsfiddle.net/2r8JL/

小开

另一种变化

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

小开

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

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

小开

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

小开

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

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

小开

如果你想要光滑闪烁的文字或类似的东西，你可以使用以下代码:

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