Pure CSS slidedown / slideup animation using transform translateY

pure-slidedown-slideup.css

.slide-up, .slide-down {
  overflow:hidden;
}
.slide-up > div, .slide-down > div {
  transform: translateY(-100%);
  transition: .4s ease-in-out;
}
.slide-down > div {            
  transform: translateY(0);
} 

pure-slidedown-slideup.html

<div class="container" style="padding: 40px">

  <button onclick="trigger()">Trigger Slideup/SlideDown</button>

  <div id="Slider" class="slide-up">
    <div>
      <p class="contents">
        Hello World Text
      </p>
    </div>
  </div>

</div>

pure-slidedown-slideup.js

// slideup/slidedown
trigger = function () {
  Slider.classList.toggle("slide-down")
  //Slider.classList.toggle("slideup")
};

Awesome, thank you :)

v nice

Where is the HTML ?

@l-Aeden-l Please check the following codepen project for a complete demo: https://codepen.io/nathan-sr/pen/OJaadOj

The animation timing is currently set to 8 seconds on this project, which can be adjusted later on. Don't worry if you miss this instruction. Just re-load the page again.

https://codepen.io/devarthur/pen/eYQbdvR