I really want to make a piece of text blink the old-school style without using javascript or text-decoration.
No transitions, only *blink*, *blink*, *blink*!
EDIT: This is different from that question because I ask for blinking without continuous transitions, whereas OP of the other questions asks how to replace blinking with continuous transitions
This question is related to
html
css
css-animations
blink
Try this CSS
@keyframes blink { _x000D_
0% { color: red; }_x000D_
100% { color: black; }_x000D_
}_x000D_
@-webkit-keyframes blink {_x000D_
0% { color: red; }_x000D_
100% { color: black; }_x000D_
}_x000D_
.blink {_x000D_
-webkit-animation: blink 1s linear infinite;_x000D_
-moz-animation: blink 1s linear infinite;_x000D_
animation: blink 1s linear infinite;_x000D_
} This is <span class="blink">blink</span>? You need browser/vendor specific prefixes: http://jsfiddle.net/es6e6/1/.
There's actually no need for visibility or opacity - you can simply use color, which has the upside of keeping any "blinking" to the text only:
blink {_x000D_
display: inline;_x000D_
color: inherit;_x000D_
animation: blink 1s steps(1) infinite;_x000D_
-webkit-animation: blink 1s steps(1) infinite;_x000D_
}_x000D_
@keyframes blink { 50% { color: transparent; } }_x000D_
@-webkit-keyframes blink { 50% { color: transparent; } }Here is some text, <blink>this text will blink</blink>, this will not.Fiddle: http://jsfiddle.net/2r8JL/
Let me show you a little trick.
As Arkanciscan said, you can use CSS3 transitions. But his solution looks different from the original tag.
What you really need to do is this:
@keyframes blink {_x000D_
50% {_x000D_
opacity: 0.0;_x000D_
}_x000D_
}_x000D_
@-webkit-keyframes blink {_x000D_
50% {_x000D_
opacity: 0.0;_x000D_
}_x000D_
}_x000D_
.blink {_x000D_
animation: blink 1s step-start 0s infinite;_x000D_
-webkit-animation: blink 1s step-start 0s infinite;_x000D_
}<span class="blink">Blink</span>Another variation
.blink {_x000D_
-webkit-animation: blink 1s step-end infinite;_x000D_
animation: blink 1s step-end infinite;_x000D_
}_x000D_
@-webkit-keyframes blink { 50% { visibility: hidden; }}_x000D_
@keyframes blink { 50% { visibility: hidden; }}This is <span class="blink">blink</span>It's working in my case blinking text at 1s interval.
.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; }
}
If you want smooth blinking text or something a like you can use following code:
.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>I'm going to hell for this :
=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 (sass with bourbon)
Please find below solution for your code.
@keyframes blink {_x000D_
50% {_x000D_
color: transparent;_x000D_
}_x000D_
}_x000D_
_x000D_
.loader__dot {_x000D_
animation: 1s blink infinite;_x000D_
}_x000D_
_x000D_
.loader__dot:nth-child(2) {_x000D_
animation-delay: 250ms;_x000D_
}_x000D_
_x000D_
.loader__dot:nth-child(3) {_x000D_
animation-delay: 500ms;_x000D_
}Loading <span class="loader__dot">.</span><span class="loader__dot">.</span><span class="loader__dot">.</span>if you want some glow effect use this
@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;
}
Source: Stackoverflow.com