@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@-webkit-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-webkit-keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
<!-- www.w3schools.com/cssref/css3_pr_animation-keyframes.asp -->

.fadeIn{
  animation: fadeIn;
  animation-duration: 0.3s;
}

.fadeOut{
  animation: fadeOut;
  animation-duration: 0.3s;
}