mightypoint/animation.css

.hidden {
    opacity: 0;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in { animation: fadeIn 2s ease-in-out forwards; }

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.fade-in-left { animation: fadeInLeft 2s ease-in-out forwards; }

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.fade-in-right { animation: fadeInRight 2s ease-in-out forwards; }

@keyframes fadeInTop {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-top { animation: fadeInTop 2s ease-in-out forwards; }

@keyframes fadeInBottom {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-bottom { animation: fadeInBottom 2s ease-in-out forwards; }

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
.fade-out { animation: fadeOut 2s ease-in-out forwards; }

@keyframes fadeOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-20px);
  }
}
.fade-out-left { animation: fadeOutLeft 2s ease-in-out forwards; }

@keyframes fadeOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(20px);
  }
}
.fade-out-right { animation: fadeOutRight 2s ease-in-out forwards; }

@keyframes fadeOutTop {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}
.fade-out-top { animation: fadeOutTop 2s ease-in-out forwards; }

@keyframes fadeOutBottom {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}
.fade-out-bottom { animation: fadeOutBottom 2s ease-in-out forwards; }

@keyframes zoomIn {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.zoom-in { animation: zoomIn 1.5s ease-in-out forwards; }

@keyframes zoomOut {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0);
    opacity: 0;
  }
}
.zoom-out { animation: zoomOut 1.5s ease-in-out forwards; }

@keyframes flyInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.fly-in-left { animation: flyInLeft 2s ease-out; }

@keyframes flyInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.fly-in-right { animation: flyInRight 2s ease-out; }

@keyframes flyInTop {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.fly-in-top { animation: flyInTop 2s ease-out; }

@keyframes flyInBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.fly-in-bottom { animation: flyInBottom 2s ease-out; }

@keyframes flyOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}
.fly-out-left { animation: flyOutLeft 2s ease-out forwards; }

@keyframes flyOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
.fly-out-right { animation: flyOutRight 2s ease-out forwards; }

@keyframes flyOutTop {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}
.fly-out-top { animation: flyOutTop 2s ease-out forwards; }

@keyframes flyOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}
.fly-out-bottom { animation: flyOutBottom 2s ease-out forwards; }

@keyframes spinInClockwise {
  from {
    transform: rotate(0deg);
    opacity: 0;
  }
  to {
    transform: rotate(360deg);
    opacity: 1;
  }
}
.spin-in-clockwise { animation: spinInClockwise 2s ease-in-out; }

@keyframes spinInCounterclockwise {
  from {
    transform: rotate(0deg);
    opacity: 0;
  }
  to {
    transform: rotate(-360deg);
    opacity: 1;
  }
}
.spin-in-counterclockwise { animation: spinInCounterclockwise 2s ease-in-out; }

@keyframes spinOutClockwise {
  from {
    transform: rotate(360deg);
    opacity: 1;
  }
  to {
    transform: rotate(0deg);
    opacity: 0;
  }
}
.spin-out-clockwise { animation: spinOutClockwise 2s ease-in-out forwards; }

@keyframes spinOutCounterclockwise {
  from {
    transform: rotate(-360deg);
    opacity: 1;
  }
  to {
    transform: rotate(0deg);
    opacity: 0;
  }
}
.spin-out-counterclockwise { animation: spinOutCounterclockwise 2s ease-in-out forwards; }

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes blinkCursor {
  from { border-right-color: rgba(0, 0, 0, 0.75); }
  to { border-right-color: transparent; }
}
.typing {
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid rgba(0, 0, 0, 0.75);
  width: 0;
  animation: typing 4s steps(40, end), blinkCursor 0.75s step-end infinite forwards;
}