$transition: 1s ease;
$short-transition: 0.25s ease;

/* stylelint-disable */

// Library of styles to eventually pull animations from.
@keyframes fadeOut {
  0% {opacity: 1}
  100% {opacity: 0}
}

@keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}

@keyframes shake {
  0%, 100% {transform: translateX(0);}
  10%, 50%, 90%  {transform: translateX(-10px);}
  30%, 70% {transform: translateX(10px);}
}

@keyframes slideRight {
  0% { transform: translate3d(-100%,0,0) }
  100% { transform: translate3d(0,0,0) }
}

@keyframes slideLeft {
  0% { transform: translate3d(100%,0,0) }
  100% { transform: translate3d(0,0,0) }
}

@keyframes slideDown {
  0% { transform: translate3d(0,-100%,0) }
  100% { transform: translate3d(0,0,0) }
}

@keyframes slideUp {
  0% { transform: translate3d(0,100%,0) }
  100% { transform: translate3d(0,0,0) }
}

@keyframes fadeInLeft {
  0% { opacity: 0; transform: translateX(30px);  }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  0% {  opacity: 0; transform: translateX(-30px); }
  100% {  opacity: 1; transform: translateX(0); }
}

@keyframes fadeInDown {
  0% { opacity: 0; transform: translate3d(0,-100%,0) }
  100% { opacity: 1; transform: translate3d(0,0,0) }
}

@keyframes fadeInUp {
  0% { opacity: 0; transform: translate3d(0,100%,0) }
  100% { opacity: 1; transform: translate3d(0,0,0) }
}

@keyframes inLeft {
  0% { transform: translateX(30px);  }
  100% { transform: translateX(0); }
}

@keyframes inRight {
  0% { transform: translateX(-30px); }
  100% { transform: translateX(0); }
}

@keyframes inUp {
  0% { transform: translateY(30px); }
  100% { transform: translateY(0); }
}

@keyframes zoomIn {
  0% { opacity: 0; transform: scale(.9) }
  100% { opacity: 1; transform: scale(1) }
}

@keyframes scaleIn {
  0% {  opacity: 0;  transform: scale(1.9) }
  100% { opacity: 1; transform: scale(1) }
}

@keyframes click {
  0% { transform: scale(1) }
  50% { transform: scale(0.9) }
  100% { transform: scale(1) }
}

@keyframes dot {
  0% { transform: scale(1) }
  50% { transform: scale(1.3) }
  100% { transform: scale(1) }
}

@keyframes dropChip {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(0.9); }
}

@keyframes popIn {
  0% { transform: translateX(100%) scale(0); }
  33% { transform: translateX(0) scale(1); }
  100% { transform: translateX(100%) scale(0); }
}

@keyframes bounceDown {
  0% { opacity: 0; transform: translateY(-600px); }
  60% { opacity: 1; transform: translateY(30px); }
  80% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

@keyframes hoverOrnament {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(0, -1%, 0); }
  50% { transform: translate3d(0, 0, 0); }
  75% { transform: translate3d(0, 1%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

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

@keyframes spin {
  0% { transform:rotate(360deg) translateZ(0) }
  100% { transform:rotate(0deg) translateZ(0) }
}

@keyframes flash {
  50% { background-color: #deb543; }
}

@keyframes flipInX {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }

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

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

  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    transform: perspective(400px);
  }
}

@keyframes backSwingInX {
  0% {
    transform-origin: center top;
    transform: perspective(800px) rotateX(90deg);
  }

  100% {
    transform-origin: center top;
    transform: perspective(800px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes forwardSwingInX {
  0% {
    transform-origin: center top;
    transform: perspective(800px) rotateX(120deg);
  }

  100% {
    transform-origin: center top;
    transform: perspective(800px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes fadeOutUp {
  0% {
    transform: translate3d(0, 0, 0);
  }

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

@keyframes panelShake {
  0% { transform: translateX(0) }
  12% { transform: translateX(-6px) rotateY(-5deg) }
  37% { transform: translateX(5px) rotateY(4deg) }
  62% { transform: translateX(-3px) rotateY(-2deg) }
  87% { transform: translateX(2px) rotateY(1deg) }
  100% { transform: translateX(0) }
}

@keyframes quake {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(0, -5px, 0) rotate(5deg); }
  50% { transform: translate3d(0, 0, 0) rotate(-5deg); }
  75% { transform: translate3d(0, 5px, 0) rotate(5deg); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes flashRed {
  0% { color: #c60012; }
  100% { color: #fff; }
}

@keyframes progressBar {
  0% { width: 1%; }
  100% { width: 100%; }
}

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

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

@keyframes boom {
  0% {    transform: rotate(0deg) scale(0); }
  25% {   transform: rotate(10deg) scale(1); }
  75% {   transform: rotate(-10deg) scale(1.2); }
  100% {  transform: rotate(0deg) scale(0.75); }
}

@keyframes slideIn {
  0% {
    transform: translate3d(50px,0,0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0,0,0);
    opacity: 1;
  }
}

@keyframes slideOut {
  0% {
    transform: translate3d(0,0,0);
    opacity: 1;
  }
  100% {
    transform: translate3d(-50px,0,0);
    opacity: 0;
  }
}

/* stylelint-enable */
.animation-wrapper,

.animation {
  display: inline-block;
}

.animate {
  transition: all 1s ease;
}

.shake {
  animation: shake .5s ease-out;
}

.fadeOut {
  animation: fadeOut 1s forwards;
}

.fadeIn {
  animation: fadeIn 2s backwards;
}

.rotate {
  &-left {
    transform: rotate(-180deg);
    transition: transform $transition;
  }

  &-right {
    transform: rotate(180deg);
    transition: transform $transition;
  }
}

.slideDown {
  animation: slideDown $transition forwards;
}

.slideIn {
  animation: slideIn $short-transition forwards;
}

.slideOut {
  animation: slideOut $short-transition forwards;
}