Help with understanding css animation using javascript

1

Hey,

I would like some help with understanding CSS animations with javascript. Here is a little summary of what I am trying to do.

  • I have defined the fade-in and fade-out animations using @keyframes in my CSS section.
  • I am adding my animation to the targetted element through fade-in and fade-out classes that are defined in the CSS section but would be added in the javascript section.
  • These classes would be added through fadeIn() and fadeOut() functions.
  • The fadeIn() and fadeOut() functions would be called by the Animate() function.
  • The Animate() function would be invoked by the onclick event of the Animate button.

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.

Thank you.

2

The link you provided returns a 404 error.

3

Hey there, I think the original pen got deleted by me. I managed to do this task in this way:
Here is the link:link