CSS Animations

CSSAnimations.txt

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.fadeInOut {
  animation: fadeInOut 3s infinite;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-20px);
  }

  60% {
    transform: translateY(-10px);
  }
}

.bounce {
  animation: bounce 2s infinite;
}

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

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

.rotate {
  animation: rotate 5s infinite linear;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.pulse {
  animation: pulse 2s infinite;
}

@keyframes wobble {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-5deg);
  }

  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(5deg);
  }

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

.wobble {
  animation: wobble 1s infinite;
}

@keyframes slideInLeft {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}

.slideInLeft {
  animation: slideInLeft 2s forwards;
}

@keyframes slideInRight {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}

.slideInRight {
  animation: slideInRight 2s forwards;
}

@keyframes slideInUp {
  0% {
    transform: translateY(100%);
  }

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

.slideInUp {
  animation: slideInUp 2s forwards;
}

@keyframes slideInDown {
  0% {
    transform: translateY(-100%);
  }

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

.slideInDown {
  animation: slideInDown 2s forwards;
}

@keyframes slideOutLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

.slideOutLeft {
  animation: slideOutLeft 2s forwards;
}

@keyframes slideOutRight {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(100%);
  }
}

.slideOutRight {
  animation: slideOutRight 2s forwards;
}

@keyframes slideOutUp {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}

.slideOutUp {
  animation: slideOutUp 2s forwards;
}

@keyframes slideOutDown {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(100%);
  }
}

.slideOutDown {
  animation: slideOutDown 2s forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  animation: fadeIn 2s forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.fadeOut {
  animation: fadeOut 2s forwards;
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }

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

.fadeInLeft {
  animation: fadeInLeft 2s forwards;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

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

.fadeInRight {
  animation: fadeInRight 2s forwards;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

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

.fadeInUp {
  animation: fadeInUp 2s forwards;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

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

.fadeInDown {
  animation: fadeInDown 2s forwards;
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}

.fadeOutLeft {
  animation: fadeOutLeft 2s forwards;
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

.fadeOutRight {
  animation: fadeOutRight 2s forwards;
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

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

.fadeOutUp {
  animation: fadeOutUp 2s forwards;
}

@keyframes fadeOutDown {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

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

.fadeOutDown {
  animation: fadeOutDown 2s forwards;
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.zoomIn {
  animation: zoomIn 2s forwards;
}

@keyframes zoomOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0);
  }
}

.zoomOut {
  animation: zoomOut 2s forwards;
}

@keyframes zoomInLeft {
  0% {
    opacity: 0;
    transform: scale(0) translateX(-100%);
  }

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

.zoomInLeft {
  animation: zoomInLeft 2s forwards;
}

@keyframes zoomInRight {
  0% {
    opacity: 0;
    transform: scale(0) translateX(100%);
  }

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

.zoomInRight {
  animation: zoomInRight 2s forwards;
}

@keyframes zoomInUp {
  0% {
    opacity: 0;
    transform: scale(0) translateY(100%);
  }

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

.zoomInUp {
  animation: zoomInUp 2s forwards;
}

@keyframes zoomInDown {
  0% {
    opacity: 0;
    transform: scale(0) translateY(-100%);
  }

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

.zoomInDown {
  animation: zoomInDown 2s forwards;
}

@keyframes zoomOutLeft {
  0% {
    opacity: 1;
    transform: scale(1) translateX(0);
  }

  100% {
    opacity: 0;
    transform: scale(0) translateX(-100%);
  }
}

.zoomOutLeft {
  animation: zoomOutLeft 2s forwards;
}

@keyframes zoomOutRight {
  0% {
    opacity: 1;
    transform: scale(1) translateX(0);
  }

  100% {
    opacity: 0;
    transform: scale(0) translateX(100%);
  }
}

.zoomOutRight {
  animation: zoomOutRight 2s forwards;
}

@keyframes zoomOutUp {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

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

.zoomOutUp {
  animation: zoomOutUp 2s forwards;
}

@keyframes zoomOutDown {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

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

.zoomOutDown {
  animation: zoomOutDown 2s forwards;
}

@keyframes rotateIn {
  0% {
    opacity: 0;
    transform: rotate(-200deg);
  }

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

.rotateIn {
  animation: rotateIn 2s forwards;
}

@keyframes rotateOut {
  0% {
    opacity: 1;
    transform: rotate(0);
  }

  100% {
    opacity: 0;
    transform: rotate(200deg);
  }
}

.rotateOut {
  animation: rotateOut 2s forwards;
}

@keyframes rotateInLeft {
  0% {
    opacity: 0;
    transform: rotate(-200deg) translateX(-100%);
  }

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

.rotateInLeft {
  animation: rotateInLeft 2s forwards;
}

@keyframes rotateInRight {
  0% {
    opacity: 0;
    transform: rotate(-200deg) translateX(100%);
  }

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

.rotateInRight {
  animation: rotateInRight 2s forwards;
}

@keyframes rotateInUpLeft {
  0% {
    opacity: 0;
    transform: rotate(-200deg) translateX(-100%) translateY(100%);
  }

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

.rotateInUpLeft {
  animation: rotateInUpLeft 2s forwards;
}

@keyframes rotateInUpRight {
  0% {
    opacity: 0;
    transform: rotate(-200deg) translateX(100%) translateY(100%);
  }

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

.rotateInUpRight {
  animation: rotateInUpRight 2s forwards;
}

@keyframes rotateInDownLeft {
  0% {
    opacity: 0;
    transform: rotate(-200deg) translateX(-100%) translateY(-100%);
  }

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

.rotateInDownLeft {
  animation: rotateInDownLeft 2s forwards;
}

@keyframes rotateInDownRight {
  0% {
    opacity: 0;
    transform: rotate(-200deg) translateX(100%) translateY(-100%);
  }

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

.rotateInDownRight {
  animation: rotateInDownRight 2s forwards;
}

@keyframes rotateOutLeft {
  0% {
    opacity: 1;
    transform: rotate(0) translateX(0);
  }

  100% {
    opacity: 0;
    transform: rotate(200deg) translateX(-100%);
  }
}

.rotateOutLeft {
  animation: rotateOutLeft 2s forwards;
}

@keyframes rotateOutRight {
  0% {
    opacity: 1;
    transform: rotate(0) translateX(0);
  }

  100% {
    opacity: 0;
    transform: rotate(200deg) translateX(100%);
  }
}

.rotateOutRight {
  animation: rotateOutRight 2s forwards;
}

@keyframes rotateOutUpLeft {
  0% {
    opacity: 1;
    transform: rotate(0) translateX(0) translateY(0);
  }

  100% {
    opacity: 0;
    transform: rotate(200deg) translateX(-100%) translateY(100%);
  }
}

.rotateOutUpLeft {
  animation: rotateOutUpLeft 2s forwards;
}

@keyframes rotateOutUpRight {
  0% {
    opacity: 1;
    transform: rotate(0) translateX(0) translateY(0);
  }

  100% {
    opacity: 0;
    transform: rotate(200deg) translateX(100%) translateY(100%);
  }
}

.rotateOutUpRight {
  animation: rotateOutUpRight 2s forwards;
}

@keyframes rotateOutDownLeft {
  0% {
    opacity: 1;
    transform: rotate(0) translateX(0) translateY(0);
  }

  100% {
    opacity: 0;
    transform: rotate(200deg) translateX(-100%) translateY(-100%);
  }
}

.rotateOutDownLeft {
  animation: rotateOutDownLeft 2s forwards;
}

@keyframes rotateOutDownRight {
  0% {
    opacity: 1;
    transform: rotate(0) translateX(0) translateY(0);
  }

  100% {
    opacity: 0;
    transform: rotate(200deg) translateX(100%) translateY(-100%);
  }
}

.rotateOutDownRight {
  animation: rotateOutDownRight 2s forwards;
}

@keyframes lightSpeedInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100%) skewX(-30deg);
  }

  60% {
    opacity: 1;
    transform: skewX(20deg);
  }

  80% {
    transform: skewX(-5deg);
  }

  100% {
    transform: translateX(0) skewX(0);
  }
}

.lightSpeedInLeft {
  animation: lightSpeedInLeft 2s forwards;
}

@keyframes lightSpeedInRight {
  0% {
    opacity: 0;
    transform: translateX(100%) skewX(30deg);
  }

  60% {
    opacity: 1;
    transform: skewX(-20deg);
  }

  80% {
    transform: skewX(5deg);
  }

  100% {
    transform: translateX(0) skewX(0);
  }
}

.lightSpeedInRight {
  animation: lightSpeedInRight 2s forwards;
}

@keyframes lightSpeedOutLeft {
  0% {
    opacity: 1;
    transform: translateX(0) skewX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-100%) skewX(-30deg);
  }
}

.lightSpeedOutLeft {
  animation: lightSpeedOutLeft 2s forwards;
}

@keyframes lightSpeedOutRight {
  0% {
    opacity: 1;
    transform: translateX(0) skewX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(100%) skewX(30deg);
  }
}

.lightSpeedOutRight {
  animation: lightSpeedOutRight 2s forwards;
}

@keyframes flip {
  0% {
    transform: perspective(400px) rotateY(0);
    animation-timing-function: ease-out;
  }

  40% {
    transform: perspective(400px) translateZ(150px) rotateY(170deg);
    animation-timing-function: ease-out;
  }

  50% {
    transform: perspective(400px) translateZ(150px) rotateY(190deg)
      scale3d(1, 1, 1);
    animation-timing-function: ease-in;
  }

  80% {
    transform: perspective(400px) rotateY(360deg) scale3d(0.95, 0.95, 0.95);
    animation-timing-function: ease-in;
  }

  100% {
    transform: perspective(400px) scale3d(1, 1, 1);
    animation-timing-function: ease-in;
  }
}

.flip {
  animation: flip 2s forwards;
}

@keyframes flipInX {
  0% {
    transform: perspective(400px) rotateX(90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotateX(-20deg);
    animation-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotateX(10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotateX(-5deg);
  }

  100% {
    transform: perspective(400px);
  }
}

.flipInX {
  animation: flipInX 2s forwards;
}

@keyframes flipInY {
  0% {
    transform: perspective(400px) rotateY(90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotateY(-20deg);
    animation-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotateY(10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotateY(-5deg);
  }

  100% {
    transform: perspective(400px);
  }
}

.flipInY {
  animation: flipInY 2s forwards;
}

@keyframes flipOutX {
  0% {
    transform: perspective(400px);
  }

  30% {
    transform: perspective(400px) rotateX(-20deg);
    opacity: 1;
  }

  100% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

.flipOutX {
  animation: flipOutX 2s forwards;
}

@keyframes flipOutY {
  0% {
    transform: perspective(400px);
  }

  30% {
    transform: perspective(400px) rotateY(-20deg);
    opacity: 1;
  }

  100% {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

.flipOutY {
  animation: flipOutY 2s forwards;
}

@keyframes fadeInTopLeft {
  0% {
    opacity: 0;
    transform: translate(-20px, -20px);
  }

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

.fadeInTopLeft {
  animation: fadeInTopLeft 2s forwards;
}

@keyframes fadeInTopRight {
  0% {
    opacity: 0;
    transform: translate(20px, -20px);
  }

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

.fadeInTopRight {
  animation: fadeInTopRight 2s forwards;
}

@keyframes fadeInBottomLeft {
  0% {
    opacity: 0;
    transform: translate(-20px, 20px);
  }

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

.fadeInBottomLeft {
  animation: fadeInBottomLeft 2s forwards;
}

@keyframes fadeInBottomRight {
  0% {
    opacity: 0;
    transform: translate(20px, 20px);
  }

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

.fadeInBottomRight {
  animation: fadeInBottomRight 2s forwards;
}

@keyframes fadeOutTopLeft {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }

  100% {
    opacity: 0;
    transform: translate(-20px, -20px);
  }
}

.fadeOutTopLeft {
  animation: fadeOutTopLeft 2s forwards;
}

@keyframes fadeOutTopRight {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }

  100% {
    opacity: 0;
    transform: translate(20px, -20px);
  }
}

.fadeOutTopRight {
  animation: fadeOutTopRight 2s forwards;
}

.rollIn {
  animation: rollIn 2s forwards;
}

@keyframes rollIn {
  0% {
    transform: translateX(-100%) rotate(-120deg);
    opacity: 0;
  }

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

.rollOut {
  animation: rollOut 2s forwards;
}

@keyframes rollOut {
  0% {
    transform: translateX(0) rotate(0);
    opacity: 1;
  }

  100% {
    transform: translateX(100%) rotate(120deg);
    opacity: 0;
  }
}

.hinge {
  animation: hinge 2s forwards;
}

@keyframes hinge {
  0% {
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    transform: rotate(80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    transform: rotate(60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

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

.flash {
  animation: flash 2s infinite;
}

@keyframes flash {
  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.shake {
  animation: shake 2s infinite;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

@keyframes swing {
  20% {
    transform: rotate(15deg);
  }

  40% {
    transform: rotate(-10deg);
  }

  60% {
    transform: rotate(5deg);
  }

  80% {
    transform: rotate(-5deg);
  }

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

.swing {
  transform-origin: top center;
  animation: swing 2s infinite;
}

.headShake {
  animation: headShake 2s infinite;
}

@keyframes headShake {
  0% {
    transform: translateX(0);
  }

  6.5% {
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    transform: translateX(2px) rotateY(3deg);
  }

  100% {
    transform: translateX(0);
  }
}

.jackInTheBox {
  animation: jackInTheBox 2s;
}

@keyframes jackInTheBox {
  0% {
    opacity: 0;
    transform: scale(0.1) rotate(30deg);
    transform-origin: center bottom;
  }

  50% {
    transform: rotate(-10deg);
  }

  70% {
    transform: rotate(3deg);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.bounceIn {
  animation: bounceIn 2s;
}

@keyframes bounceIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }

  50% {
    transform: scale(1.05);
    opacity: 1;
  }

  70% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

.bounceInDown {
  animation: bounceInDown 2s;
}

@keyframes bounceInDown {
  0% {
    transform: translateY(-2000px);
    animation-timing-function: ease-in;
    opacity: 0;
  }

  60% {
    transform: translateY(30px);
    animation-timing-function: ease-out;
  }

  80% {
    transform: translateY(-10px);
  }

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

.bounceInUp {
  animation: bounceInUp 2s;
}

@keyframes bounceInUp {
  0% {
    transform: translateY(2000px);
    animation-timing-function: ease-in;
    opacity: 0;
  }

  60% {
    transform: translateY(-30px);
    animation-timing-function: ease-out;
  }

  80% {
    transform: translateY(10px);
  }

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

.bounceInLeft {
  animation: bounceInLeft 2s;
}

@keyframes bounceInLeft {
  0% {
    transform: translateX(-2000px);
    animation-timing-function: ease-in;
    opacity: 0;
  }

  60% {
    transform: translateX(30px);
    animation-timing-function: ease-out;
  }

  80% {
    transform: translateX(-10px);
  }

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

.bounceInRight {
  animation: bounceInRight 2s;
}

@keyframes bounceInRight {
  0% {
    transform: translateX(2000px);
    animation-timing-function: ease-in;
    opacity: 0;
  }

  60% {
    transform: translateX(-30px);
    animation-timing-function: ease-out;
  }

  80% {
    transform: translateX(10px);
  }

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