Reputation: 11
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
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
Reputation: 3409
you can use the following:
obviously I'm going to use JQuery
:
jQuery('<div_name>').css('opacity', '<opacity_value>');
Upvotes: 0