How to make blinking/flashing text with CSS 3

by

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

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
<div class="blink_me">BLINK ME</div>

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)

More Related Contents:

  1. How to keep origin in center of image in scale animation?
  2. How do I give text or an image a transparent background using CSS?
  3. How can I create a marquee effect?
  4. Rotate objects around circle using CSS?
  5. Imitating a blink tag with CSS3 animations
  6. How to change text transparency in HTML/CSS?
  7. CSS Background Opacity [duplicate]
  8. Animating Linear Gradient using CSS
  9. left-right movement.. css only very generic
  10. How to make in CSS an overlay over an image?
  11. How to apply an opacity without affecting a child element with html/css?
  12. CSS border color switch animation: “from” color not correct
  13. How to Animate Gradients using CSS
  14. How to darken a background using CSS?
  15. How to run the CSS3 animation to the end if the selector is not matching anymore?
  16. Making text background transparent but not text itself
  17. How do I reduce the opacity of an element’s background using CSS?
  18. Ring-shaped process spinner with fading gradient effect around the ring
  19. CSS animate custom properties/variables
  20. infinite loop slider using keyframes css3
  21. How to keep styles after animation?
  22. How to add images in select list?
  23. minmax() defaulting to max
  24. Media Queries for Different zoom Levels of Browser
  25. Jenkins – HTML Publisher Plugin – No CSS is displayed when report is viewed in Jenkins Server
  26. Creating a CSS3 box-shadow on all sides but one
  27. padding is not working in Safari and IE in select list
  28. Why is a trailing punctuation mark rendered at the start with direction:rtl?
  29. CSS object-fit: contain; is keeping original image width in layout
  30. @Media print css

Leave a Comment