- I have defined the
fade-outanimations using @keyframes in my CSS section.
- I am adding my animation to the targetted element through
- These classes would be added through
fadeOut()functions would be called by the
Animate()function would be invoked by the
onclickevent of the
It works okay for the first time. Text “Fades In” as expected. However, After that, it does not animate, even if I remove the
fade-in class and re-add it. The problem I am facing with
fade-out is that it does not occur in the sequence I have written the code. Instead, the text alters before the
fadeOut function runs and consequently the newly altered text fades Out. ( However, I have called the fadeOut function before and have altered the
innerHTML property of the text later)
What I want to accomplish is that every time when I click the
Animate button, the targeted element fades in. After that, when
animate button is clicked again, the text fades out and fades in with the new text that has been set by altering the
innerHTML property of the text.
Here is the link to the codepen: link.
Any help to make this concept clear or about what I am missing would be greatly helpful!. If I am doing something entirely wrong please point out as I am totally new to this.