How to make blinking flashing text with CSS 3

Question

Currently  I have this code    -webkit-keyframes blinker     from   opacity  1 0      to   opacity  0 0        waitingForConnection     -webkit-animation-name  blinker    -webkit-animation-iteration-count  infinite    -webkit-animation-timing-function  cubic-bezier  5  0  1  1     -webkit-animation-duration  1 7s      It blinks  but it only blinks in  one direction   I mean  it only fades out  and then it appears back with opacity  1 0  then again fades out  appears again  and so on     I would like it to fade out  and then  raise  from this fade back again to opacity  1 0  Is that possible

User · Accepted Answer

You are first setting opacity  1  and then you are ending it on 0  so it starts from 0  and ends on 100   so instead just set opacity to 0 at 50  and the rest will take care of itself   Demo   x000D   x000D   blink me   x000D    animation  blinker 1s linear infinite  x000D    x000D   x000D   keyframes blinker   x000D    50    x000D      opacity  0  x000D      x000D    x000D   lt div class  blink me  gt BLINK ME lt  div gt  x000D   x000D   x000D    Here  I am setting the animation duration to be 1 second  and then I am setting the timing to linear  That means it will be constant throughout  Last  I am using infinite  That means it will go on and on      Note  If this doesn t work for you  use browser prefixes like   -webkit  -moz and so on as required for animation and    keyframes  You can refer to my detailed code here     As commented  this won t work on older versions of Internet Explorer  and for that you need to use jQuery or JavaScript      function blink           blink me   fadeOut 500  fadeIn 500  blink           Thanks to Alnitak for suggesting a better approach   Demo  Blinker using jQuery

User · Answer

Alternatively if you do not want a gradual transition between show and hide  e g  a blinking text cursor  you could use something like      Also use prefixes with  keyframes and animation to support current browsers     keyframes blinker       from   visibility  visible     to   visibility  hidden         Alternatively you can do this      0    visibility  visible      50    visibility  hidden      100    visibility  visible      if you don t want to use  alternate        cursor     animation  blinker steps 1  500ms infinite alternate      Every 1s  cursor will go from visible to hidden   If CSS animation is not supported  e g  in some versions of Safari  you can fallback to this simple JS interval    function      var show    visible      state var toggled by interval   var time   500     milliseconds between each interval    setInterval function            Toggle our visible state on each interval     show    show      hidden      visible     hidden           Get the cursor elements     var cursors   document getElementsByClassName  cursor           We could do this outside the interval callback         but then it wouldn t be kept in sync with the DOM         Loop through the cursor elements and update them to the current state     for  var i   0  i  lt  cursors length  i            cursors i  style visibility   show             time          This simple JavaScript is actually very fast and in many cases may even be a better default than the CSS  It s worth noting that it is lots of DOM calls that make JS animations slow  e g  JQuery s   animate      It also has the second advantage that if you add  cursor elements later  they will still animate at exactly the same time as other  cursors since the state is shared  this is impossible with CSS as far as I am aware

User · Answer

I don t know why but animating only the visibility property is not working on any browser    What you can do is animate the opacity property in such a way that the browser doesn t have enough frames to fade in or out the text   Example    x000D   x000D  span   x000D    opacity  0  x000D    animation  blinking 1s linear infinite  x000D    x000D   x000D   keyframes blinking   x000D    from  x000D    49 9    x000D      opacity  0  x000D      x000D    50   x000D    to   x000D      opacity  1  x000D      x000D    x000D   lt span gt I m blinking text lt  span gt  x000D   x000D   x000D

User · Answer

lt style gt       class1          height 100px          line-height 100px          color white          font-family Bauhaus 93          padding 25px          background-color  2a9fd4          border outset blue          border-radius 25px          box-shadow 10px 10px green          font-size 45px              class2          height 100px          line-height 100px          color white          font-family Bauhaus 93          padding 25px          background-color green          border outset blue          border-radius 25px          box-shadow 10px 10px green          font-size 65px         lt  style gt   lt script src  jquery-3 js  gt  lt  script gt   lt script gt        document  ready function                  div1   addClass  class1            var flag   true           function blink                 if flag                                    div1   addClass  class2                    flag   false                            else                                if      div1   hasClass  class2                            div1   removeClass  class2   addClass  class1                    flag   true                                  window setInterval blink  1000            lt  script gt

User · Answer

The best way to get a pure  100  on  100  off  blink  like the old  lt blink gt  is like this    x000D   x000D   blink   x000D    animation  blinker 1s step-start infinite  x000D    x000D   x000D   keyframes blinker   x000D    50    x000D      opacity  0  x000D      x000D    x000D   lt div class  blink  gt BLINK lt  div gt  x000D   x000D   x000D

User · Answer

Use the alternate value for animation-direction  and you don t need to add any keframes this way    alternate The animation should reverse direction each cycle  When playing in reverse  the animation steps are performed backward  In addition  timing functions are also reversed  for example  an ease-in animation is replaced with an ease-out animation when played in reverse  The count to determinate if it is an even or an odd iteration starts at one   CSS   waitingForConnection     animation  blinker 1 7s cubic-bezier  5  0  1  1  infinite alternate       keyframes blinker   to   opacity  0       I ve removed the from keyframe  If it s missing  it gets generated from the value you ve set for the animated property  opacity in this case  on the element  or if you haven t set it  and you haven t in this case   from the default value  which is 1 for opacity   And please don t use just the WebKit version  Add the unprefixed one after it as well  If you just want to write less code  use the shorthand   x000D   x000D   waitingForConnection     animation  blinker 1 7s cubic-bezier  5  0  1  1  infinite alternate       keyframes blinker   to   opacity  0        waitingForConnection2     animation  blinker2 0 6s cubic-bezier 1  0  0  1  infinite alternate       keyframes blinker2   to   opacity  0        waitingForConnection3     animation  blinker3 1s ease-in-out infinite alternate       keyframes blinker3   to   opacity  0      x000D   lt div class  waitingForConnection  gt X lt  div gt   lt div class  waitingForConnection2  gt Y lt  div gt   lt div class  waitingForConnection3  gt Z lt  div gt  x000D   x000D   x000D

User · Answer

Late but wanted to add a new one with more keyframes     here is an example on CodePen since there was an issue with the built-in code snippets     x000D   x000D   block  x000D    display inline-block  x000D    padding 30px 50px  x000D    background  000  x000D    x000D   flash-me   x000D    color  fff  x000D    font-size 40px  x000D    -webkit-animation  flash linear 1 7s infinite  x000D    animation  flash linear 1 7s infinite  x000D    x000D   x000D   -webkit-keyframes flash   x000D    0    opacity  0     x000D    80    opacity  1  color  fff     x000D    83    opacity  0  color  fff     x000D    86    opacity  1  color  fff     x000D    89    opacity  0   x000D    92    opacity  1  color  fff    x000D    95    opacity  0  color  fff   x000D    100    opacity  1  color  fff   x000D    x000D   keyframes flash   x000D    0    opacity  0     x000D    80    opacity  1  color  fff     x000D    83    opacity  0  color  fff     x000D    86    opacity  1  color  fff     x000D    89    opacity  0   x000D    92    opacity  1  color  fff    x000D    95    opacity  0  color  fff   x000D    100    opacity  1  color  fff   x000D    x000D   lt span class  block  gt  x000D     lt span class  flash-me  gt Flash Me Hard lt  span gt  x000D   lt  span gt  x000D   x000D   x000D

User · Answer

It works for me by using class blink for the respective element s   Simple JS Code     Blink       setInterval function                      setTimeout function                            blink   css  color   rgba 0 0 0 0 1        If you want simply black white blink of text             blink   css  visibility   hidden       This is for Visibility of the element               900                   blink   css  color   rgba 0 0 0 1         If you want simply black white blink of text             blink   css  visibility   visible        This is for Visibility of the element            1000

User · Answer

neon     font-size  20px    color   fff    text-shadow  0 0 8px yellow    animation  blinker 6s    animation-iteration-count  1     keyframes blinker     0        opacity  0 2        19        opacity  0 2        20        opacity  1        21        opacity  1        22        opacity  0 2        23        opacity  0 2        36        opacity  0 2        40        opacity  1        41        opacity  0        42        opacity  1        43        opacity  0 5        50        opacity  1        100        opacity  1         I used font-family   quot Quicksand quot   sans-serif  This is the import of the font  goes in the top of the style css   import url  quot https   fonts googleapis com css2 family Quicksand wght 300 amp display swap quot

User · Answer

Change duration and opacity to suit    blink text        -webkit-animation-name  blinker      -webkit-animation-duration  3s      -webkit-animation-timing-function  linear      -webkit-animation-iteration-count  infinite      -moz-animation-name  blinker      -moz-animation-duration  3s      -moz-animation-timing-function  linear      -moz-animation-iteration-count  infinite      animation-name  blinker      animation-duration  3s      animation-timing-function  linear       animation-iteration-count  infinite  color  red        -moz-keyframes blinker       0    opacity  1 0        50    opacity  0 3        100    opacity  1 0         -webkit-keyframes blinker        0    opacity  1 0        50    opacity  0 3        100    opacity  1 0          keyframes blinker        0    opacity  1 0         50    opacity  0 3         100    opacity  1 0

User · Answer

-webkit-keyframes blinker       0    opacity  1 0      50    opacity  0 0      100    opacity  1 0         x000D   x000D   -webkit-keyframes blinker     x000D    0    opacity  1 0    x000D    50    opacity  0 0    x000D    100    opacity  1 0    x000D    x000D   x000D   blink   x000D    width  10px  x000D    height  10px  x000D    border-radius  10px  x000D    animation  blinker 2s linear infinite  x000D    background-color  red  x000D    margin-right  5px  x000D    x000D   x000D   content   x000D    display  flex  x000D    flex-direction  row  x000D    align-items  center  x000D    x000D   lt div class  content  gt  x000D     lt i class  blink  gt  lt  i gt  x000D    LIVE x000D   lt  div gt  x000D   x000D   x000D

[html] How to make blinking/flashing text with CSS 3

Examples related to html

Examples related to css

Examples related to css-animations

Examples related to opacity