div {
  background-color: tomato;
  display: block;
  height: 10rem;
  width: 10rem;
  opacity: 0;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
 }
 div.fadein {
  -webkit-animation: fade 2s;
  animation: fade 2s;
  opacity: 1;
 }
 div.fadeout {
  -webkit-animation: fade 2s reverse;
  animation: fade 2s reverse;
  opacity: 0;
 }
@-webkit-keyframes fade {
  from { opacity: 0 }
  to { opacity: 1 }
}
@keyframes fade {
  from { opacity: 0 }
  to { opacity: 1 }
}
div = document.createElement('div');
document.body.appendChild(div);
div.className = 'fadein';
window.setTimeout(function () {
  div.className = 'fadeout';
}, 3000);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.