canvas {
  display: block;
  position: absolute;
  top: 0;

  background: #000000;
  background: linear-gradient(185deg, rgba(0, 0, 0, 1) 16%, #231444 100%);
  opacity: 0;
  -webkit-animation: fadeinout 8s linear forwards;
  animation: fadeinout 8s linear forwards initial;
}

/* ---- particles.js container ---- */
#particles-container {
  position: absolute;
  top: 0;

  width: 100%;
  height: 100%;

  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% 100%;
}

/* Image by Patrick Fore on Unsplash */
.elementToFadeInAndOut {
  width: 200px;
  height: 200px;
  background: red;
  -webkit-animation: fadeinout 4s linear forwards;
  animation: fadeinout 4s linear forwards;
  opacity: 0;
}

@-webkit-keyframes fadeinout {
  50% {
    opacity: 0.5;
  }
}

@keyframes fadeinout {
  100% {
    opacity: 0.8;
  }
}