// Default animation settings. May be overriden in specific animation classes.
%animated {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

// Fade In
//
// Element fades in.
//
// Markup:
//   <a class="button -secondary button--preview js-styleguide-animation-preview" data-class="fade-in">Preview</a>
//
// Styleguide Animation - Fade In
.fade-in {
  @extend %animated;
  animation-name: fadeIn;
}

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

  100% {
    opacity: 1;
  }
}

// Fade In & Up
//
// Element fades in and up.
//
// Markup:
//   <a class="button -secondary button--preview js-styleguide-animation-preview" data-class="fade-in-up">Preview</a>
//
// Styleguide Animation - Fade In Up
.fade-in-up {
  @extend %animated;
  animation-name: fadeInUp;
}

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

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


// Fade Out
//
// Element fades out.
//
// Markup:
//   <a class="button -secondary button--preview js-styleguide-animation-preview" data-class="fade-out">Preview</a>
//
// Styleguide Animation - Fade Out
.fade-out {
  @extend %animated;
  animation-name: fadeOut;
}

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

  100% {
    opacity: 0;
  }
}

// Fade Out & Down
//
// Element fades out and down.
//
// Markup:
//   <a class="button -secondary button--preview js-styleguide-animation-preview" data-class="fade-out-down">Preview</a>
//
// Styleguide Animation - Fade Out Down
.fade-out-down {
  @extend %animated;
  animation-name: fadeOutDown;
}

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

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


// Move down animation
@keyframes moveDown {
  0% {
    transform: translateY(0);
  }

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

// Wiggle
//
// "Wiggle" animation used to pull the user's attention to an element.
//
// Markup:
//   <a class="button -secondary button--preview js-styleguide-animation-preview" data-class="tada">Preview</a>
//
// Styleguide Animation - Tada
.tada {
  @extend %animated;
  animation-name: tada;
}

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

  10%, 20% {
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    transform: scale(1.1) rotate(-3deg);
  }

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

// Wobble
//
// Kind of like a "womp womp".
//
// Markup:
//   <a class="button -secondary button--preview js-styleguide-animation-preview" data-class="wobble">Preview</a>
//
// Styleguide Animation - Wobble
.wobble {
  @extend %animated;
  animation-duration: 1s;
  animation-name: wobble;
}

@keyframes wobble {
  0% {
    transform: 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);
  }
}

// Shake
//
// Shake animation (similar to OS X convention for form errors).
//
// Markup:
//   <a class="button -secondary button--preview js-styleguide-animation-preview" data-class="shake">Preview</a>
//
// Styleguide Animation - Shake
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }

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

  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}

.shake {
  @extend %animated;
  animation-duration: 1s;
  animation-name: shake;
}

// Zoom In
//
// Zoom (scale) in.
//
// Markup:
//   <a class="button -secondary button--preview js-styleguide-animation-preview" data-class="zoom-in">Preview</a>
//
// Styleguide Animation - Zoom In
@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale3d(0.95, 0.95, 0.95);
  }

  50% {
    opacity: 1;
  }
}

.zoom-in {
  @extend %animated;
  animation-name: zoomIn;
}