// ---------------------------------------------------------------------------
@keyframes flash {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

// ---------------------------------------------------------------------------
@keyframes bounce {
  0% {
    translatey: 0;
  }
  20% {
    translatey: 0;
  }
  40% {
    translatey: -30px;
  }
  50% {
    translatey: 0;
  }
  60% {
    translatey: -15px;
  }
  80% {
    translatey: 0;
  }
  100% {
    translatey: 0;
  }
}

// ---------------------------------------------------------------------------
@keyframes shake {
  0% {
    translatex: 0;
  }
  10% {
    translatex: -10px;
  }
  20% {
    translatex: 10px;
  }
  30% {
    translatex: -10px;
  }
  40% {
    translatex: 10px;
  }
  50% {
    translatex: -10px;
  }
  60% {
    translatex: 10px;
  }
  70% {
    translatex: -10px;
  }
  80% {
    translatex: 10px;
  }
  90% {
    translatex: -10px;
  }
  100% {
    translatex: 0;
  }
}

// ---------------------------------------------------------------------------
@keyframes tada {
  0% {
    scale: 1;
  }
  10% {
    transform: scale(0.9) rotate(-3deg);
  }
  20% {
    transform: scale(0.9) rotate(-3deg);
  }
  30% {
    transform: scale(1.1) rotate(3deg);
  }
  40% {
    transform: scale(1.1) rotate(-3deg);
  }
  50% {
    transform: scale(1.1) rotate(3deg);
  }
  60% {
    transform: scale(1.1) rotate(-3deg);
  }
  70% {
    transform: scale(1.1) rotate(3deg);
  }
  80% {
    transform: scale(1.1) rotate(-3deg);
  }
  90% {
    transform: scale(1.1) rotate(3deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}

// ---------------------------------------------------------------------------
@keyframes swing {
  20%,
  40%,
  60%,
  80%,
  100% {
    transform-origin: top center;
  }
  20% {
    rotate: 15deg;
  }
  40% {
    rotate: -10deg;
  }
  60% {
    rotate: 5deg;
  }
  80% {
    rotate: -5deg;
  }
  100% {
    rotate: 0deg;
  }
}

// ---------------------------------------------------------------------------
@keyframes wobble {
  0% {
    translatex: 0%;
  }
  15% {
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    transform: translateX(0%);
  }
}

// ---------------------------------------------------------------------------
@keyframes pulse {
  0% {
    scale: 1;
  }
  50% {
    scale: 1.1;
  }
  100% {
    scale: 1;
  }
}