CODEWITHSUNDEEP
csscss-transitions
ILikeTacos
ILikeTacos

Reputation: 18666

How to create "Blinking" text with CSS only?

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.

Upvotes: 1

Views: 20355

Answers (4)

Yehuda Schwartz
Yehuda Schwartz

Reputation: 3503

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

Upvotes: 4

Niels
Niels

Reputation: 49909

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;

Upvotes: 9

Sky
Sky

Reputation: 31

.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?

Upvotes: 1

Saharsh
Saharsh

Reputation: 1098

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;
  }
}

Upvotes: 1

Related Questions