i have a website where when the user clicks on the “next” button it hides the current page and swtiches to the next, like a guide-installer.
And now i need to fade in the pages, how can i do it?
I managed to hide and show the pages like this:

HTML

<div class="main-container">
      <form id="form1" class="form">
        <button onclick="getStarted()" type="button">Get Started</button>
      </form>
      <form id="form2" class="form">
         Content B
      </form>
      etc
</div>

and then i have the javascript function

function getStarted() {
    document.getElementById("form1").style.display = "none";
    document.getElementById("form2").style.display = "flex";
}

How can i fade in #form2?

I tried using CSS, but unsuccesfully.