I recently created an animation using CSS3.
The source code is quite simple. It involves displaying text and then making it disappear after 4 seconds.
Below you can find the current source code:
const intro1 = document.getElementsByClassName('intro1')[0];
setTimeout(() => {
intro1.classList.remove('fade-in');
intro1.classList.add('fade-out');
}, 3500);body {
margin: 30px 0;
padding: 0 15px;
}
section {
display: flex;
justify-content: center;
align-items: center;
background-color: aliceblue;
width: 100%;
height: 100%;
font-size: 2rem;
font-weight: 100;
}
span {
text-align: center;
position: absolute;
}
/* Intro animation */
.fade-in {
display: inline-block;
overflow: hidden;
white-space: nowrap;
animation: fadeIn 4s;
}
.fade-out {
animation: fadeOut 1s;
}
@keyframes fadeIn {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes fadeOut {
to {
opacity: 0;
}
}I have defined the classes fade-in and fade-out, and initially set the classname of .intro1 to 'fade-in'.
With a delay of 3.5 seconds using setTimeout, I remove the class fade-in and add the class fade-out to make the text disappear.
The text appears and disappears as expected when I test it.
However, after the text disappears, it reappears unexpectedly.
https://i.sstatic.net/neRQQ.gif
I would like to prevent the text from showing again after its opacity becomes 0.
Could you suggest a solution for this issue?
Thank you.