How to create "Blinking" text with CSS only?

Question

I'm trying to create a CSS only solution for blinking text. The text should say:

Researching...

and I'd like it to fade-in and fade-out, giving the impression to the user that it's researching at the same pace that a beating heart.

This is the code that I have so far:

HTML:

<p class="blinking">Researching...</p>

CSS:

.blinking {
    transition: opacity 2s ease-in-out infinite;
  opacity: 1;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5
  }

  100% {
    opacity: 0;
  }
}

But this isn't working, also this is for a chrome extenson, so as long as it works in the latest version of chrome should be enough.

Replace transition with animation, and you can also add alternate if you want https://jsfiddle.net/Lg0wyt9u/1864/ — Nenad Vracar, May 01 '17 at 14:46

Niels · Accepted Answer · 2017-05-01T14:57:28.280

8

Your issue is that you use transition and animation in 1 line.

Change your transition to animation like below. Also changed the opacity to 1 -> 0 -> 1 instead of 1 -> 0.5 -> 0 because you want to have a blink not 1 -> 0 and than no transition to 1 opacity again.

A fiddle: https://jsfiddle.net/kc6936cw/

.blinking {

    animation: opacity 2s ease-in-out infinite;
    opacity: 1;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0
  }

  100% {
    opacity: 1;
  }
}

Edit: jtmingus comment could also be used:
You could also add the alternate tag to the end instead of going from 1 -> 0 -> 1. That would look like animation: opacity 2s ease-in-out infinite alternate;

edited May 01 '17 at 14:57

answered May 01 '17 at 14:43

Niels

48,601
4
62
81

Awesome!! This was it. I'll accept your answer as soon as SO lets me. – ILikeTacos May 01 '17 at 14:44
You could also add the `alternate` tag to the end instead of going from 1 -> 0 -> 1. That would look like `animation: opacity 2s ease-in-out infinite alternate;` – jtmingus May 01 '17 at 14:45

Yehuda Schwartz · Answer 2 · 2021-04-22T13:43:12.893

4

This shoud do it

.blinking {
    animation: mymove 2s infinite alternate;
}

@keyframes mymove {
    from {opacity:0;}
    to {opacity: 1;}
}

<p class="blinking">Researching...</p>

this is a much smoother animation

edited Apr 22 '21 at 13:43

answered May 01 '17 at 14:49

Yehuda Schwartz

3,378
3
29
38

score 1 · Answer 3 · edited May 23 '17 at 11:54

1

.blinking {
    transition: opacity 2s ease-in-out infinite;
    animation: blinker 1s linear infinite;
  opacity: 1;
}

@keyframes blinker {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5
  }

  100% {
    opacity: 0;
  }
}

There is already a very good example How to make blinking/flashing text with css3?

edited May 23 '17 at 11:54

Community

1
1

answered May 01 '17 at 14:49

Sky

31
5

score 0 · Answer 4 · answered May 01 '17 at 14:44

Apparently, instead of transition, animation should be used.

.blinking {
  animation-name:animate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  opacity: 1;
}

@keyframes animate {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5
  }

  100% {
    opacity: 0;
  }
}

How to create "Blinking" text with CSS only?

4 Answers4