How to fade in a div using only CSS and JavaScript when a different div is clicked

I have a project I am working on where one div (div1) has a ‘click’ event listener. When it is clicked, I have div1 sliding over to the right using a @keyframes animation. However I also want another div (div2) to fade in while div1 is sliding. To do so I am using another @keyframes animation.

Here is the HTML code:

<div class="div1"> 
      <h3> Important </h3>
</div>
<div class="div2">
      <p>
         This is the text that I would like to have
         faded in when div1 is clicked on
      </p>
</div>

There is multiple div1s and multiple div2s but for the sake of simplicity, I just included one set of them. Let me know if you would like to see more code.

Here is the CSS code:

.div1 {
   /* Style */
   display: flex;
   position: relative;
   flex-direction: column;

   /* Dimensions */
   width: 17vw;
   height: 17vw;
   min-width: 160px;
   min-height: 160px;
   max-width: 190px;
   max-height: 190px;

   /* Animation */
   animation-name: slide;
   animation-duration: .8s;
   animation-fill-mode: forwards;
   animation-timing-function: ease-out;
   animation-play-state: paused;
}

@keyframes slide {
  from {
      left: 0;
  }
  to {
      left: 75vw;
  }
}

.div2 {
   position: relative;
   max-width: 70vw;
   display: none;
   animation-name: fade;
   animation-duration: .8s;
   animation-fill-mode: forwards;
   animation-delay: .5s;
   animation-play-state: pause;
}

@keyframes fade {
   from {
       display: none;
   }
   to {
       display: block;
   }
}

.run-animation {
   animation-play-state: running;
}

There is more code for styling and such. The run-animation class will be added to both divs when div1 is clicked.

Here is the JavaScript code:

    var div1 = document.getElementsByClassName('div1');

    for (var i = 0; i < div1.length; i++) {
       div1[i].addEventListener("click", function() {
           this.className = "div1 run-animation"
           
           
           var div2= document.getElementsByClassName('div2');
           /* I am just selecting the first div2 to change just one */
           div2[0].className = "div2 run-animation"
       })
   }

The code does update the class names for both div1, and div2. My problem is that only div1 animates, div2 doesn’t change it just stays (display: none;). How can I solve this problem? Let me know if you need me to elaborate on anything more. Thank You.

Snippet:

var div1 = document.getElementsByClassName('div1');

for (var i = 0; i < div1.length; i++) {
    div1[i].addEventListener("click", function() {
        this.classList.add("div1 run-animation")


        var div2= document.getElementsByClassName('div2');
        /* I am just selecting the first div2 to change just one */
        div2[0].classList.add("div2 run-animation")
    })
}

.div1 {
    /* Style */
    display: flex;
    position: relative;
    flex-direction: column;

    /* Dimensions */
    width: 17vw;
    height: 17vw;
    min-width: 160px;
    min-height: 160px;
    max-width: 190px;
    max-height: 190px;

    /* Animation */
    animation-name: slide;
    animation-duration: .8s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    animation-play-state: paused;
}

@keyframes slide {
    from {
        left: 0;
    }
    to {
        left: 75vw;
    }
}

.div2 {
    position: relative;
    max-width: 70vw;
    display: none;
    animation-name: fade;
    animation-duration: .8s;
    animation-fill-mode: forwards;
    animation-delay: .5s;
    animation-play-state: pause;
}

@keyframes fade {
    from {
        display: none;
    }
    to {
        display: block;
    }
}

.run-animation {
    animation-play-state: running;
}

<div class="div1">
    <h3> Important </h3>
</div>
<div class="div2">
    <p>
        This is the text that I would like to have
        faded in when div1 is clicked on
    </p>
</div>

Answer

So i added another class and added some effects into the animation for div2. Also changed direct class injection to classList, code is commented with the changes.

var div1 = document.getElementsByClassName('div1');

for (var i = 0; i < div1.length; i++) {
    div1[i].addEventListener("click", function() {
        this.classList.add("div1", "run-animation");


        var div2= document.getElementsByClassName('div2');
        /* I am just selecting the first div2 to change just one */
        /*i highly recommend using classlist instead of injecting classes directly*/
        div2[0].classList.remove( "hidden");
        div2[0].classList.add("div2", "run-animation");
    })
}

.div1 {
    /* Style */
    display: flex;
    position: relative;
    flex-direction: column;

    /* Dimensions */
    width: 17vw;
    height: 17vw;
    min-width: 160px;
    min-height: 160px;
    max-width: 190px;
    max-height: 190px;

    /* Animation */
    animation-name: slide;
    animation-duration: .8s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    animation-play-state: paused;
}

@keyframes slide {
    from {
        left: 0;
    }
    to {
        left: 75vw;
    }
}

.div2 {
    position: relative;
    max-width: 70vw;
    animation-name: fade;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-delay: .2s;
    transition: opacity 0.5s;
    opacity: 0;/*new for fade in*/
}
/*new*/
.hidden {
    display: none;
    animation-play-state: paused;
}

@keyframes fade {
    from {
        display: none;
        /*new for fade-in*/
        opacity: 0;
    }
    to {
        display: block;
        /*new for fade-in*/
        opacity: 1;
    }
}

.run-animation {
    animation-play-state: running;
}

<div class="div1">
    <h3> Important </h3>
</div>
<div class="div2 hidden">
    <p>
        This is the text that I would like to have
        faded in when div1 is clicked on
    </p>
</div>