Imitating a blink tag with CSS3 animations

Question

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

User · Accepted Answer

The original Netscape  lt blink gt  had an 80  duty cycle  This comes pretty close  although the real  lt blink gt  only affects text    x000D   x000D   blink   x000D    animation  blink-animation 1s steps 5  start  infinite  x000D    -webkit-animation  blink-animation 1s steps 5  start  infinite  x000D    x000D   keyframes blink-animation   x000D    to   x000D      visibility  hidden  x000D      x000D    x000D   -webkit-keyframes blink-animation   x000D    to   x000D      visibility  hidden  x000D      x000D    x000D  This is  lt span class  blink  gt blinking lt  span gt  text  x000D   x000D   x000D    You can find more info about Keyframe Animations here

User · Answer

Another variation   x000D   x000D   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     x000D  This is  lt span class  blink  gt blink lt  span gt  x000D   x000D   x000D

User · Answer

Please find below solution for your code        x000D   x000D   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    x000D  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  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

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    x000D   x000D   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    x000D   lt span class  blink  gt Blink lt  span gt  x000D   x000D   x000D    JSfiddle Demo

User · Answer

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

User · Answer

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    x000D   x000D  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      x000D  Here is some text   lt blink gt this text will blink lt  blink gt   this will not  x000D   x000D   x000D    Fiddle  http   jsfiddle net 2r8JL

User · Answer

If you want smooth blinking text or something a like you can use following code   x000D   x000D    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            x000D   lt span class  blinking  gt I am smoothly blinking lt  span gt  x000D   x000D   x000D

User · Answer

Try this CSS   x000D   x000D   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     x000D  This is  lt span class  blink  gt blink lt  span gt  x000D   x000D   x000D      You need browser vendor specific prefixes  http   jsfiddle net es6e6 1

[html] Imitating a blink tag with CSS3 animations

Examples related to html

Examples related to css

Examples related to css-animations

Examples related to blink