<button class="fadeIn-button">fadeIn</button>
<div class="hidden-layer">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur fugiat perspiciatis excepturi tenetur, corrupti delectus nisi illo incidunt optio nobis modi quisquam alias ad eveniet dolor quam voluptatem, numquam aut?</div>

<hr>

<button class="fadeOut-button">fadeOut</button>
<div class="show-layer">Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sed eius sint, totam repellat consequatur quaerat, ullam officia esse, necessitatibus cupiditate atque. Eveniet voluptatibus maiores nemo quia blanditiis quas excepturi?</div>

<hr>

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates corporis magnam voluptate quis voluptatem nemo corrupti harum a consectetur quia, illum eaque nesciunt ipsam velit officia cumque. Eligendi, corporis laborum?
/* default */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-size: 16px;

  body {
    padding: 10px;
    height: 100vh;
    width: 100vw;
  }
}

hr {
  margin: 20px 0;
  height: 1px;
  background-color: #ddd;
  border: 0;
}

button {
  display: inline-block;
  padding: 0 10px;
  height: 30px;
  border: 1px solid #555;
  background-color: #f5f5f5;
  cursor: pointer;
}

/* fadeIn */
.hidden-layer {
  display: none;
  margin-top: 10px;
}

.fadeIn {
  display: block;
  animation: fadeIn 0.3s forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* fadeOut */
.show-layer {
  margin-top: 10px;
}

.fadeOut {
  animation: fadeOut 0.3s forwards;
}

@keyframes fadeOut {
  100% {
    opacity: 0;
  }
}
View Compiled
// fadeIn
const fadeInButton = document.querySelector('.fadeIn-button');
const hiddenLayer = document.querySelector('.hidden-layer');
fadeInButton.addEventListener('click', e => {
  hiddenLayer.classList.add('fadeIn');
});

// fadeOut
const fadeOutButton = document.querySelector('.fadeOut-button');
const showLayer = document.querySelector('.show-layer');
fadeOutButton.addEventListener('click', e => {
  showLayer.classList.add('fadeOut');

  // Change display to none when fadeOut animation is finished
  showLayer.addEventListener('animationend', () => {
    showLayer.style.display = 'none';
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.