<div class="container">
  <h1 class="-text-center">Fading out and keeping styling</h1>
</div>
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

h1 {
  animation: fadeOut 2s ease;
  animation-fill-mode: forwards;
}
View Compiled
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css
  2. https://codepen.io/gregh/pen/jyNrJW.css

External JavaScript

This Pen doesn't use any external JavaScript resources.