common-animations.css

@keyframes anim-rotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes anim-fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes anim-fadeout {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes anim-fadein-up {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes anim-fadein-down {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


@keyframes anim-fadeout-down {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes anim-fadein-zoom {
  0% {
    opacity: 0;
    transform: scale(0.8);
    transform-origin: center;
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes anim-fadeout-zoom {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
    transform-origin: center;
  }
}

.fadein {
  animation: anim-fadein 0.2s;
}
.fadeout {
  animation: anim-fadeout 0.2s;
  animation-fill-mode: forwards;
}
/**
 * Delayed fade-in. Use this for loaders and things that you don't want to
 * show too quickly
 */
.fadein-delay {
  animation-delay: .5s;
  animation-fill-mode: backwards;
}
.fadeup {
  animation: anim-fadein-up 0.2s;
}
.fadedown {
  animation: anim-fadein-down 0.2s;
}
.fadezoom {
  animation: anim-fadein-zoom 0.2s;
}
.fadezoom-out {
  animation: anim-fadeout-zoom 0.2s;
  animation-fill-mode: forwards;
}