CODEWITHSUNDEEP
htmlcss
aj pix
aj pix

Reputation: 11

Need to fade in fade out text in sequence

I came across text that fades in and fades out one after the other.

In developer mode, I was able to see the opacity vary for the texts from 0 to 1 to 0 in a sequence. How is this achieved?

<div class="text" style="opacity: 0;">The</div> 
<div class="text" style="opacity: 0;">Nomads</div>

Upvotes: 0

Views: 2359

Answers (2)

Luke
Luke

Reputation: 3551

Here's a very simplistic approach using CSS3 Animations and the keyframes property (Please note I've edited this answer to include improvements from Frits' comment)

Although you might need to tweak it a little as

a text which fade in fade out one after the other

Is a pretty lose specification.

/* Define the key frames for animating the fade in / fade out */

@keyframes fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/* attach the animations to the elements via their id attribute using a delay of 0s and 50% of the runtime respectively */

#one {
  animation: fade 3s infinite 0s;
}

#two {
  animation: fade 3s infinite 1.5s;
}
<p id="one">
  This line of text will fade out as the next lines fade in
</p>
<p id="two">
  This line of text will fade in as the previous lines fade out
</p>

Upvotes: 3

Sreetam Das
Sreetam Das

Reputation: 3409

you can use the following:

obviously I'm going to use JQuery:

jQuery('<div_name>').css('opacity', '<opacity_value>');

Upvotes: 0

Related Questions