/**
 * Animations and animation modifiers.
 *
 * @section Animations
 */

/**
 * Transition and reaction animations. By default, these run once for 1.5 seconds.
 *
 * @group
 * @memberof Animations
 * @example
 * <div class="bg-blue inline-block mr18 w60 h60 round animation-pulse animation--infinite"></div>
 * <div class="bg-blue inline-block mr18 w60 h60 round animation-spin animation--infinite"></div>
 * <div class="bg-blue inline-block mr18 w60 h60 round animation-fade-in animation--infinite"></div>
 * <div class="bg-blue inline-block mr18 w60 h60 round animation-fade-out animation--infinite"></div>
 * <div class="bg-blue inline-block mr18 w60 h60 round animation-fade-in-out animation--infinite"></div>
 * <div class="bg-blue inline-block mr18 w60 h60 round animation-shake animation--infinite"></div>
*/
.animation-pulse { animation: pulse 1.5s ease-in-out; }
.animation-spin { animation: spin 1.5s linear; }
.animation-fade-in { animation: fadein 1.5s ease-in forwards; }
.animation-fade-out { animation: fadein 1.5s ease-out reverse forwards; }
.animation-fade-in-out { animation: fadeinout 1.5s ease-in-out forwards; }
.animation-shake { animation: shake 1.5s ease-in-out; }
/** @endgroup */

/**
 * Animation duration modifiers.
 * Change animation duration with an `animation--speed-{seconds}` modifier.
 * Add a 1 second delay with `animation--delay`.
 *
 * @group
 * @memberof Animations
 * @example
 * <div class="bg-blue inline-block mr18 w60 h60 round animation-spin animation--infinite animation--speed-025"></div>
 * <div class="bg-blue inline-block mr18 w60 h60 round animation-spin animation--infinite animation--speed-05"></div>
 * <div class="bg-blue inline-block mr18 w60 h60 round animation-spin animation--infinite animation--speed-1"></div>
 * <div class="bg-blue inline-block mr18 w60 h60 round animation-spin animation--infinite animation--speed-2"></div>
 * <div class="bg-blue inline-block mr18 w60 h60 round animation-spin animation--infinite animation--speed-4"></div>
 * <div class="bg-blue inline-block mr18 w60 h60 round animation-spin animation--infinite animation--delay"></div>
 */
.animation--speed-025 { animation-duration: 250ms; }
.animation--speed-05 { animation-duration: 500ms; }
.animation--speed-1 { animation-duration: 1s; }
.animation--speed-2 { animation-duration: 2s; }
.animation--speed-4 { animation-duration: 4s; }
.animation--delay { animation-delay: 1s; }
/** @endgroup */

/**
 * Repeat an animation infinitely with a `animation--infinite` modifier.
 *
 * @memberof Animations
 * @example
 * <div class="bg-blue inline-block mr18 w60 h60 round animation-spin animation--infinite"></div>
 */
.animation--infinite { animation-iteration-count: infinite; }

@keyframes pulse {
  0% { transform: scale(0.5); opacity: 0; }
  45% { opacity: 0.5; }
  90% { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

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

@keyframes fadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

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

@keyframes shake {
  from,
  to { transform: translate3d(0, 0, 0); }

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

  20%,
  40%,
  60%,
  80% { transform: translate3d(12px, 0, 0); }
}