/* Table of Contents
==================================================
# Keyframes
# Animation
# Names
# Delays
# Durations */

/* # Keyframes
================================================== */
@-webkit-keyframes animation-bounce {
  0%, 20%, 50%, 80%, 100% { @include transform(translateY(0)); }
  40% { @include transform(translateY(-30px)); }
  60% { @include transform(translateY(-15px)); }
}
@keyframes animation-bounce {
  0%, 20%, 50%, 80%, 100% { @include transform(translateY(0)); }
  40% { @include transform(translateY(-30px)); }
  60% { @include transform(translateY(-15px)); }
}
@-webkit-keyframes animation-flash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}
@keyframes animation-flash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}
@-webkit-keyframes animation-pulse {
  0% { @include transform(scale(1)); }
  50% { @include transform(scale(1.1)); }
  100% { @include transform(scale(1)); }
}
@keyframes animation-pulse {
  0% { @include transform(scale(1)); }
  50% { @include transform(scale(1.1)); }
  100% { @include transform(scale(1)); }
}
@-webkit-keyframes animation-shake {
  0%, 100% { @include transform(translateX(0)); }
  10%, 30%, 50%, 70%, 90% { @include transform(translateX(-10px)); }
  20%, 40%, 60%, 80% { @include transform(translateX(10px)); }
}
@keyframes animation-shake {
  0%, 100% { @include transform(translateX(0)); }
  10%, 30%, 50%, 70%, 90% { @include transform(translateX(-10px)); }
  20%, 40%, 60%, 80% { @include transform(translateX(10px)); }
}
@-webkit-keyframes animation-swing {
  20% { @include transform(rotate(15deg)); }
  40% { @include transform(rotate(-10deg)); }
  60% { @include transform(rotate(5deg)); }
  80% { @include transform(rotate(-5deg)); }
  100% { @include transform(rotate(0)); }
}
@keyframes animation-swing {
  20% { @include transform(rotate(15deg)); }
  40% { @include transform(rotate(-10deg)); }
  60% { @include transform(rotate(5deg)); }
  80% { @include transform(rotate(-5deg)); }
  100% { @include transform(rotate(0)); }
}
@-webkit-keyframes animation-tada {
  0% { @include transform(scale(1)); }
  10%, 20% { @include transform(scale(0.9) rotate(-3deg)); }
  30%, 50%, 70%, 90% { @include transform(scale(1.1) rotate(3deg)); }
  40%, 60%, 80% { @include transform(scale(1.1) rotate(-3deg)); }
  100% { @include transform(scale(1) rotate(0)); }
}
@keyframes animation-tada {
  0% { @include transform(scale(1)); }
  10%, 20% { @include transform(scale(0.9) rotate(-3deg)); }
  30%, 50%, 70%, 90% { @include transform(scale(1.1) rotate(3deg)); }
  40%, 60%, 80% { @include transform(scale(1.1) rotate(-3deg)); }
  100% { @include transform(scale(1) rotate(0)); }
}
@-webkit-keyframes animation-wobble {
  0% { @include transform(translateX(0)); }
  15% { @include transform(translateX(-25%) rotate(-5deg)); }
  30% { @include transform(translateX(20%) rotate(3deg)); }
  45% { @include transform(translateX(-15%) rotate(-3deg)); }
  60% { @include transform(translateX(10%) rotate(2deg)); }
  75% { @include transform(translateX(-5%) rotate(-1deg)); }
  100% { @include transform(translateX(0)); }
}
@keyframes animation-wobble {
  0% { @include transform(translateX(0)); }
  15% { @include transform(translateX(-25%) rotate(-5deg)); }
  30% { @include transform(translateX(20%) rotate(3deg)); }
  45% { @include transform(translateX(-15%) rotate(-3deg)); }
  60% { @include transform(translateX(10%) rotate(2deg)); }
  75% { @include transform(translateX(-5%) rotate(-1deg)); }
  100% { @include transform(translateX(0)); }
}
@-webkit-keyframes animation-bounce-in {
  0% {
    opacity: 0;
    @include transform(scale(0.3));
  }
  50% {
    opacity: 1;
    @include transform(scale(1.05));
  }
  70% { @include transform(scale(0.9)); }
  100% { @include transform(scale(1)); }
}
@keyframes animation-bounce-in {
  0% {
    opacity: 0;
    @include transform(scale(0.3));
  }
  50% {
    opacity: 1;
    @include transform(scale(1.05));
  }
  70% { @include transform(scale(0.9)); }
  100% { @include transform(scale(1)); }
}
@-webkit-keyframes animation-bounce-in-down {
  0% {
    opacity: 0;
    @include transform(translateY(-2000px));
  }
  60% {
    opacity: 1;
    @include transform(translateY(30px));
  }
  80% { @include transform(translateY(-10px)); }
  100% { @include transform(translateY(0)); }
}
@keyframes animation-bounce-in-down {
  0% {
    opacity: 0;
    @include transform(translateY(-2000px));
  }
  60% {
    opacity: 1;
    @include transform(translateY(30px));
  }
  80% { @include transform(translateY(-10px)); }
  100% { @include transform(translateY(0)); }
}
@-webkit-keyframes animation-bounce-in-left {
  0% {
    opacity: 0;
    @include transform(translateX(-2000px));
  }
  60% {
    opacity: 1;
    @include transform(translateX(30px));
  }
  80% { @include transform(translateX(-10px)); }
  100% { @include transform(translateX(0)); }
}
@keyframes animation-bounce-in-left {
  0% {
    opacity: 0;
    @include transform(translateX(-2000px));
  }
  60% {
    opacity: 1;
    @include transform(translateX(30px));
  }
  80% { @include transform(translateX(-10px)); }
  100% { @include transform(translateX(0)); }
}
@-webkit-keyframes animation-bounce-in-right {
  0% {
    opacity: 0;
    @include transform(translateX(2000px));
  }
  60% {
    opacity: 1;
    @include transform(translateX(-30px));
  }
  80% { @include transform(translateX(10px)); }
  100% { @include transform(translateX(0)); }
}
@keyframes animation-bounce-in-right {
  0% {
    opacity: 0;
    @include transform(translateX(2000px));
  }
  60% {
    opacity: 1;
    @include transform(translateX(-30px));
  }
  80% { @include transform(translateX(10px)); }
  100% { @include transform(translateX(0)); }
}
@-webkit-keyframes animation-bounce-in-up {
  0% {
    opacity: 0;
    @include transform(translateY(2000px));
  }
  60% {
    opacity: 1;
    @include transform(translateY(-30px));
  }
  80% { @include transform(translateY(10px)); }
  100% { @include transform(translateY(0)); }
}
@keyframes animation-bounce-in-up {
  0% {
    opacity: 0;
    @include transform(translateY(2000px));
  }
  60% {
    opacity: 1;
    @include transform(translateY(-30px));
  }
  80% { @include transform(translateY(10px)); }
  100% { @include transform(translateY(0)); }
}
@-webkit-keyframes animation-bounce-out {
  0% { @include transform(scale(1)); }
  25% { @include transform(scale(0.95)); }
  50% {
    opacity: 1;
    @include transform(scale(1.1));
  }
  100% {
    opacity: 0;
    @include transform(scale(0.3));
  }
}
@keyframes animation-bounce-out {
  0% { @include transform(scale(1)); }
  25% { @include transform(scale(0.95)); }
  50% {
    opacity: 1;
    @include transform(scale(1.1));
  }
  100% {
    opacity: 0;
    @include transform(scale(0.3));
  }
}
@-webkit-keyframes animation-bounce-out-down {
  0% { @include transform(translateY(0)); }
  20% {
    opacity: 1;
    @include transform(translateY(-20px));
  }
  100% {
    opacity: 0;
    @include transform(translateY(2000px));
  }
}
@keyframes animation-bounce-out-down {
  0% { @include transform(translateY(0)); }
  20% {
    opacity: 1;
    @include transform(translateY(-20px));
  }
  100% {
    opacity: 0;
    @include transform(translateY(2000px));
  }
}
@-webkit-keyframes animation-bounce-out-left {
  0% { @include transform(translateX(0)); }
  20% {
    opacity: 1;
    @include transform(translateX(20px));
  }
  100% {
    opacity: 0;
    @include transform(translateX(-2000px));
  }
}
@keyframes animation-bounce-out-left {
  0% { @include transform(translateX(0)); }
  20% {
    opacity: 1;
    @include transform(translateX(20px));
  }
  100% {
    opacity: 0;
    @include transform(translateX(-2000px));
  }
}
@-webkit-keyframes animation-bounce-out-right {
  0% { @include transform(translateX(0)); }
  20% {
    opacity: 1;
    @include transform(translateX(-20px));
  }
  100% {
    opacity: 0;
    @include transform(translateX(2000px));
  }
}
@keyframes animation-bounce-out-right {
  0% { @include transform(translateX(0)); }
  20% {
    opacity: 1;
    @include transform(translateX(-20px));
  }
  100% {
    opacity: 0;
    @include transform(translateX(2000px));
  }
}
@-webkit-keyframes animation-bounce-out-up {
  0% { @include transform(translateY(0)); }
  20% {
    opacity: 1;
    @include transform(translateY(20px));
  }
  100% {
    opacity: 0;
    @include transform(translateY(-2000px));
  }
}
@keyframes animation-bounce-out-up {
  0% { @include transform(translateY(0)); }
  20% {
    opacity: 1;
    @include transform(translateY(20px));
  }
  100% {
    opacity: 0;
    @include transform(translateY(-2000px));
  }
}
@-webkit-keyframes animation-fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes animation-fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-webkit-keyframes animation-fade-in-down {
  0% {
    opacity: 0;
    @include transform(translateY(-20px));
  }
  100% {
    opacity: 1;
    @include transform(translateY(0));
  }
}
@keyframes animation-fade-in-down {
  0% {
    opacity: 0;
    @include transform(translateY(-20px));
  }
  100% {
    opacity: 1;
    @include transform(translateY(0));
  }
}
@-webkit-keyframes animation-fade-in-down-big {
  0% {
    opacity: 0;
    @include transform(translateY(-2000px));
  }
  100% {
    opacity: 1;
    @include transform(translateY(0));
  }
}
@keyframes animation-fade-in-down-big {
  0% {
    opacity: 0;
    @include transform(translateY(-2000px));
  }
  100% {
    opacity: 1;
    @include transform(translateY(0));
  }
}
@-webkit-keyframes animation-fade-in-left {
  0% {
    opacity: 0;
    @include transform(translateX(-20px));
  }
  100% {
    opacity: 1;
    @include transform(translateX(0));
  }
}
@keyframes animation-fade-in-left {
  0% {
    opacity: 0;
    @include transform(translateX(-20px));
  }
  100% {
    opacity: 1;
    @include transform(translateX(0));
  }
}
@-webkit-keyframes animation-fade-in-left-big {
  0% {
    opacity: 0;
    @include transform(translateX(-2000px));
  }
  100% {
    opacity: 1;
    @include transform(translateX(0));
  }
}
@keyframes animation-fade-in-left-big {
  0% {
    opacity: 0;
    @include transform(translateX(-2000px));
  }
  100% {
    opacity: 1;
    @include transform(translateX(0));
  }
}
@-webkit-keyframes animation-fade-in-right {
  0% {
    opacity: 0;
    @include transform(translateX(20px));
  }
  100% {
    opacity: 1;
    @include transform(translateX(0));
  }
}
@keyframes animation-fade-in-right {
  0% {
    opacity: 0;
    @include transform(translateX(20px));
  }
  100% {
    opacity: 1;
    @include transform(translateX(0));
  }
}
@-webkit-keyframes animation-fade-in-right-big {
  0% {
    opacity: 0;
    @include transform(translateX(2000px));
  }
  100% {
    opacity: 1;
    @include transform(translateX(0));
  }
}
@keyframes animation-fade-in-right-big {
  0% {
    opacity: 0;
    @include transform(translateX(2000px));
  }
  100% {
    opacity: 1;
    @include transform(translateX(0));
  }
}
@-webkit-keyframes animation-fade-in-up {
  0% {
    opacity: 0;
    @include transform(translateY(20px));
  }
  100% {
    opacity: 1;
    @include transform(translateY(0));
  }
}
@keyframes animation-fade-in-up {
  0% {
    opacity: 0;
    @include transform(translateY(20px));
  }
  100% {
    opacity: 1;
    @include transform(translateY(0));
  }
}
@-webkit-keyframes animation-fade-in-up-big {
  0% {
    opacity: 0;
    @include transform(translateY(2000px));
  }
  100% {
    opacity: 1;
    @include transform(translateY(0));
  }
}
@keyframes animation-fade-in-up-big {
  0% {
    opacity: 0;
    @include transform(translateY(2000px));
  }
  100% {
    opacity: 1;
    @include transform(translateY(0));
  }
}
@-webkit-keyframes animation-fade-out {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes animation-fade-out {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@-webkit-keyframes animation-fade-out-down {
  0% {
    opacity: 1;
    @include transform(translateY(0));
  }
  100% {
    opacity: 0;
    @include transform(translateY(20px));
  }
}
@keyframes animation-fade-out-down {
  0% {
    opacity: 1;
    @include transform(translateY(0));
  }
  100% {
    opacity: 0;
    @include transform(translateY(20px));
  }
}
@-webkit-keyframes animation-fade-out-down-big {
  0% {
    opacity: 1;
    @include transform(translateY(0));
  }
  100% {
    opacity: 0;
    @include transform(translateY(2000px));
  }
}
@keyframes animation-fade-out-down-big {
  0% {
    opacity: 1;
    @include transform(translateY(0));
  }
  100% {
    opacity: 0;
    @include transform(translateY(2000px));
  }
}
@-webkit-keyframes animation-fade-out-left {
  0% {
    opacity: 1;
    @include transform(translateX(0));
  }
  100% {
    opacity: 0;
    @include transform(translateX(-20px));
  }
}
@keyframes animation-fade-out-left {
  0% {
    opacity: 1;
    @include transform(translateX(0));
  }
  100% {
    opacity: 0;
    @include transform(translateX(-20px));
  }
}
@-webkit-keyframes animation-fade-out-left-big {
  0% {
    opacity: 1;
    @include transform(translateX(0));
  }
  100% {
    opacity: 0;
    @include transform(translateX(-2000px));
  }
}
@keyframes animation-fade-out-left-big {
  0% {
    opacity: 1;
    @include transform(translateX(0));
  }
  100% {
    opacity: 0;
    @include transform(translateX(-2000px));
  }
}
@-webkit-keyframes animation-fade-out-right {
  0% {
    opacity: 1;
    @include transform(translateX(0));
  }
  100% {
    opacity: 0;
    @include transform(translateX(20px));
  }
}
@keyframes animation-fade-out-right {
  0% {
    opacity: 1;
    @include transform(translateX(0));
  }
  100% {
    opacity: 0;
    @include transform(translateX(20px));
  }
}
@-webkit-keyframes animation-fade-out-right-big {
  0% {
    opacity: 1;
    @include transform(translateX(0));
  }
  100% {
    opacity: 0;
    @include transform(translateX(2000px));
  }
}
@keyframes animation-fade-out-right-big {
  0% {
    opacity: 1;
    @include transform(translateX(0));
  }
  100% {
    opacity: 0;
    @include transform(translateX(2000px));
  }
}
@-webkit-keyframes animation-fade-out-up {
  0% {
    opacity: 1;
    @include transform(translateY(0));
  }
  100% {
    opacity: 0;
    @include transform(translateY(-20px));
  }
}
@keyframes animation-fade-out-up {
  0% {
    opacity: 1;
    @include transform(translateY(0));
  }
  100% {
    opacity: 0;
    @include transform(translateY(-20px));
  }
}
@-webkit-keyframes animation-fade-out-up-big {
  0% {
    opacity: 1;
    @include transform(translateY(0));
  }
  100% {
    opacity: 0;
    @include transform(translateY(-2000px));
  }
}
@keyframes animation-fade-out-up-big {
  0% {
    opacity: 1;
    @include transform(translateY(0));
  }
  100% {
    opacity: 0;
    @include transform(translateY(-2000px));
  }
}
@-webkit-keyframes animation-flip {
  0% {
    @include animation-timing-function(ease-out);
    @include transform(perspective(400px) translateZ(0) rotateY(0) scale(1));
  }
  40% {
    @include animation-timing-function(ease-out);
    @include transform(perspective(400px) translateZ(150px) rotateY(170deg) scale(1));
  }
  50% {
    @include animation-timing-function(ease-in);
    @include transform(perspective(400px) translateZ(150px) rotateY(190deg) scale(1));
  }
  80% {
    @include animation-timing-function(ease-in);
    @include transform(perspective(400px) translateZ(0) rotateY(360deg) scale(0.95));
  }
  100% {
    @include animation-timing-function(ease-in);
    @include transform(perspective(400px) translateZ(0) rotateY(360deg) scale(1));
  }
}
@keyframes animation-flip {
  0% {
    @include animation-timing-function(ease-out);
    @include transform(perspective(400px) translateZ(0) rotateY(0) scale(1));
  }
  40% {
    @include animation-timing-function(ease-out);
    @include transform(perspective(400px) translateZ(150px) rotateY(170deg) scale(1));
  }
  50% {
    @include animation-timing-function(ease-in);
    @include transform(perspective(400px) translateZ(150px) rotateY(190deg) scale(1));
  }
  80% {
    @include animation-timing-function(ease-in);
    @include transform(perspective(400px) translateZ(0) rotateY(360deg) scale(0.95));
  }
  100% {
    @include animation-timing-function(ease-in);
    @include transform(perspective(400px) translateZ(0) rotateY(360deg) scale(1));
  }
}
@-webkit-keyframes animation-flip-in-x {
  0% {
    opacity: 0;
    @include transform(perspective(400px) rotateX(90deg));
  }
  40% { @include transform(perspective(400px) rotateX(-10deg)); }
  70% { @include transform(perspective(400px) rotateX(10deg)); }
  100% {
    opacity: 1;
    @include transform(perspective(400px) rotateX(0));
  }
}
@keyframes animation-flip-in-x {
  0% {
    opacity: 0;
    @include transform(perspective(400px) rotateX(90deg));
  }
  40% { @include transform(perspective(400px) rotateX(-10deg)); }
  70% { @include transform(perspective(400px) rotateX(10deg)); }
  100% {
    opacity: 1;
    @include transform(perspective(400px) rotateX(0));
  }
}
@-webkit-keyframes animation-flip-in-y {
  0% {
    opacity: 0;
    @include transform(perspective(400px) rotateY(90deg));
  }
  40% { @include transform(perspective(400px) rotateY(-10deg)); }
  70% { @include transform(perspective(400px) rotateY(10deg)); }
  100% {
    opacity: 1;
    @include transform(perspective(400px) rotateY(0));
  }
}
@keyframes animation-flip-in-y {
  0% {
    opacity: 0;
    @include transform(perspective(400px) rotateY(90deg));
  }
  40% { @include transform(perspective(400px) rotateY(-10deg)); }
  70% { @include transform(perspective(400px) rotateY(10deg)); }
  100% {
    opacity: 1;
    @include transform(perspective(400px) rotateY(0));
  }
}
@-webkit-keyframes animation-flip-out-x {
  0% {
    opacity: 1;
    @include transform(perspective(400px) rotateX(0));
  }
  100% {
    opacity: 0;
    @include transform(perspective(400px) rotateX(90deg));
  }
}
@keyframes animation-flip-out-x {
  0% {
    opacity: 1;
    @include transform(perspective(400px) rotateX(0));
  }
  100% {
    opacity: 0;
    @include transform(perspective(400px) rotateX(90deg));
  }
}
@-webkit-keyframes animation-flip-out-y {
  0% {
    opacity: 1;
    @include transform(perspective(400px) rotateY(0));
  }
  100% {
    opacity: 0;
    @include transform(perspective(400px) rotateY(90deg));
  }
}
@keyframes animation-flip-out-y {
  0% {
    opacity: 1;
    @include transform(perspective(400px) rotateY(0));
  }
  100% {
    opacity: 0;
    @include transform(perspective(400px) rotateY(90deg));
  }
}
@-webkit-keyframes animation-light-speed-in {
  0% {
    opacity: 0;
    @include transform(translateX(100%) skewX(-30deg));
  }
  60% {
    opacity: 1;
    @include transform(translateX(-20%) skewX(30deg));
  }
  80% {
    opacity: 1;
    @include transform(translateX(0) skewX(-15deg));
  }
  100% {
    opacity: 1;
    @include transform(translateX(0) skewX(0));
  }
}
@keyframes animation-light-speed-in {
  0% {
    opacity: 0;
    @include transform(translateX(100%) skewX(-30deg));
  }
  60% {
    opacity: 1;
    @include transform(translateX(-20%) skewX(30deg));
  }
  80% {
    opacity: 1;
    @include transform(translateX(0) skewX(-15deg));
  }
  100% {
    opacity: 1;
    @include transform(translateX(0) skewX(0));
  }
}
@-webkit-keyframes animation-light-speed-out {
  0% {
    opacity: 1;
    @include transform(translateX(0) skewX(0));
  }
  100% {
    opacity: 0;
    @include transform(translateX(100%) skewX(-30deg));
  }
}
@keyframes animation-light-speed-out {
  0% {
    opacity: 1;
    @include transform(translateX(0) skewX(0));
  }
  100% {
    opacity: 0;
    @include transform(translateX(100%) skewX(-30deg));
  }
}
@-webkit-keyframes animation-rotate-in {
  0% {
    opacity: 0;
    @include transform(rotate(-200deg));
    @include transform-origin(center center);
  }
  100% {
    opacity: 1;
    @include transform(rotate(0));
    @include transform-origin(center center);
  }
}
@keyframes animation-rotate-in {
  0% {
    opacity: 0;
    @include transform(rotate(-200deg));
    @include transform-origin(center center);
  }
  100% {
    opacity: 1;
    @include transform(rotate(0));
    @include transform-origin(center center);
  }
}
@-webkit-keyframes animation-rotate-in-down-left {
  0% {
    opacity: 0;
    @include transform(rotate(-90deg));
    @include transform-origin(left bottom);
  }
  100% {
    opacity: 1;
    @include transform(rotate(0));
    @include transform-origin(left bottom);
  }
}
@keyframes animation-rotate-in-down-left {
  0% {
    opacity: 0;
    @include transform(rotate(-90deg));
    @include transform-origin(left bottom);
  }
  100% {
    opacity: 1;
    @include transform(rotate(0));
    @include transform-origin(left bottom);
  }
}
@-webkit-keyframes animation-rotate-in-down-right {
  0% {
    opacity: 0;
    @include transform(rotate(90deg));
    @include transform-origin(right bottom);
  }
  100% {
    opacity: 1;
    @include transform(rotate(0));
    @include transform-origin(right bottom);
  }
}
@keyframes animation-rotate-in-down-right {
  0% {
    opacity: 0;
    @include transform(rotate(90deg));
    @include transform-origin(right bottom);
  }
  100% {
    opacity: 1;
    @include transform(rotate(0));
    @include transform-origin(right bottom);
  }
}
@-webkit-keyframes animation-rotate-in-up-left {
  0% {
    opacity: 0;
    @include transform(rotate(90deg));
    @include transform-origin(left bottom);
  }
  100% {
    opacity: 1;
    @include transform(rotate(0));
    @include transform-origin(left bottom);
  }
}
@keyframes animation-rotate-in-up-left {
  0% {
    opacity: 0;
    @include transform(rotate(90deg));
    @include transform-origin(left bottom);
  }
  100% {
    opacity: 1;
    @include transform(rotate(0));
    @include transform-origin(left bottom);
  }
}
@-webkit-keyframes animation-rotate-in-up-right {
  0% {
    opacity: 0;
    @include transform(rotate(-90deg));
    @include transform-origin(right bottom);
  }
  100% {
    opacity: 1;
    @include transform(rotate(0));
    @include transform-origin(right bottom);
  }
}
@keyframes animation-rotate-in-up-right {
  0% {
    opacity: 0;
    @include transform(rotate(-90deg));
    @include transform-origin(right bottom);
  }
  100% {
    opacity: 1;
    @include transform(rotate(0));
    @include transform-origin(right bottom);
  }
}
@-webkit-keyframes animation-rotate-out {
  0% {
    opacity: 1;
    @include transform(rotate(0));
    @include transform-origin(center center);
  }
  100% {
    opacity: 0;
    @include transform(rotate(200deg));
    @include transform-origin(center center);
  }
}
@keyframes animation-rotate-out {
  0% {
    opacity: 1;
    @include transform(rotate(0));
    @include transform-origin(center center);
  }
  100% {
    opacity: 0;
    @include transform(rotate(200deg));
    @include transform-origin(center center);
  }
}
@-webkit-keyframes animation-rotate-out-down-left {
  0% {
    opacity: 1;
    @include transform(rotate(0));
    @include transform-origin(left bottom);
  }
  100% {
    opacity: 0;
    @include transform(rotate(90deg));
    @include transform-origin(left bottom);
  }
}
@keyframes animation-rotate-out-down-left {
  0% {
    opacity: 1;
    @include transform(rotate(0));
    @include transform-origin(left bottom);
  }
  100% {
    opacity: 0;
    @include transform(rotate(90deg));
    @include transform-origin(left bottom);
  }
}
@-webkit-keyframes animation-rotate-out-down-right {
  0% {
    opacity: 1;
    @include transform(rotate(0));
    @include transform-origin(right bottom);
  }
  100% {
    opacity: 0;
    @include transform(rotate(-90deg));
    @include transform-origin(right bottom);
  }
}
@keyframes animation-rotate-out-down-right {
  0% {
    opacity: 1;
    @include transform(rotate(0));
    @include transform-origin(right bottom);
  }
  100% {
    opacity: 0;
    @include transform(rotate(-90deg));
    @include transform-origin(right bottom);
  }
}
@-webkit-keyframes animation-rotate-out-up-left {
  0% {
    opacity: 1;
    @include transform(rotate(0));
    @include transform-origin(left bottom);
  }
  100% {
    opacity: 0;
    @include transform(rotate(-90deg));
    @include transform-origin(left bottom);
  }
}
@keyframes animation-rotate-out-up-left {
  0% {
    opacity: 1;
    @include transform(rotate(0));
    @include transform-origin(left bottom);
  }
  100% {
    opacity: 0;
    @include transform(rotate(-90deg));
    @include transform-origin(left bottom);
  }
}
@-webkit-keyframes animation-rotate-out-up-right {
  0% {
    opacity: 1;
    @include transform(rotate(0));
    @include transform-origin(right bottom);
  }
  100% {
    opacity: 0;
    @include transform(rotate(90deg));
    @include transform-origin(right bottom);
  }
}
@keyframes animation-rotate-out-up-right {
  0% {
    opacity: 1;
    @include transform(rotate(0));
    @include transform-origin(right bottom);
  }
  100% {
    opacity: 0;
    @include transform(rotate(90deg));
    @include transform-origin(right bottom);
  }
}
@-webkit-keyframes animation-slide-in-down {
  0% {
    opacity: 0;
    @include transform(translateY(-2000px));
  }
  100% { @include transform(translateY(0)); }
}
@keyframes animation-slide-in-down {
  0% {
    opacity: 0;
    @include transform(translateY(-2000px));
  }
  100% { @include transform(translateY(0)); }
}
@-webkit-keyframes animation-slide-in-left {
  0% {
    opacity: 0;
    @include transform(translateX(-2000px));
  }
  100% { @include transform(translateX(0)); }
}
@keyframes animation-slide-in-left {
  0% {
    opacity: 0;
    @include transform(translateX(-2000px));
  }
  100% { @include transform(translateX(0)); }
}
@-webkit-keyframes animation-slide-in-right {
  0% {
    opacity: 0;
    @include transform(translateX(2000px));
  }
  100% { @include transform(translateX(0)); }
}
@keyframes animation-slide-in-right {
  0% {
    opacity: 0;
    @include transform(translateX(2000px));
  }
  100% { @include transform(translateX(0)); }
}
@-webkit-keyframes animation-slide-out-left {
  0% { @include transform(translateX(0)); }
  100% {
    opacity: 0;
    @include transform(translateX(-2000px));
  }
}
@keyframes animation-slide-out-left {
  0% { @include transform(translateX(0)); }
  100% {
    opacity: 0;
    @include transform(translateX(-2000px));
  }
}
@-webkit-keyframes animation-slide-out-right {
  0% { @include transform(translateX(0)); }
  100% {
    opacity: 0;
    @include transform(translateX(2000px));
  }
}
@keyframes animation-slide-out-right {
  0% { @include transform(translateX(0)); }
  100% {
    opacity: 0;
    @include transform(translateX(2000px));
  }
}
@-webkit-keyframes animation-slide-out-up {
  0% { @include transform(translateY(0)); }
  100% {
    opacity: 0;
    @include transform(translateY(-2000px));
  }
}
@keyframes animation-slide-out-up {
  0% { @include transform(translateY(0)); }
  100% {
    opacity: 0;
    @include transform(translateY(-2000px));
  }
}
@-webkit-keyframes animation-hinge {
  0% {
    @include transform(rotate(0));
    @include transform-origin(top left);
  }
  20%, 60% {
    @include transform(rotate(80deg));
    @include transform-origin(top left);
  }
  40% {
    @include transform(rotate(60deg));
    @include transform-origin(top left);
  }
  80% {
    opacity: 1;
    @include transform(rotate(60deg) translateY(0));
    @include transform-origin(top left);
  }
  100% {
    opacity: 0;
    @include transform(translateY(700px));
  }
}
@keyframes animation-hinge {
  0% {
    @include transform(rotate(0));
    @include transform-origin(top left);
  }
  20%, 60% {
    @include transform(rotate(80deg));
    @include transform-origin(top left);
  }
  40% {
    @include transform(rotate(60deg));
    @include transform-origin(top left);
  }
  80% {
    opacity: 1;
    @include transform(rotate(60deg) translateY(0));
    @include transform-origin(top left);
  }
  100% {
    opacity: 0;
    @include transform(translateY(700px));
  }
}
@-webkit-keyframes animation-roll-in {
  0% {
    opacity: 0;
    @include transform(translateX(-100%) rotate(-120deg));
  }
  100% {
    opacity: 1;
    @include transform(translateX(0) rotate(0));
  }
}
@keyframes animation-roll-in {
  0% {
    opacity: 0;
    @include transform(translateX(-100%) rotate(-120deg));
  }
  100% {
    opacity: 1;
    @include transform(translateX(0) rotate(0));
  }
}
@-webkit-keyframes animation-roll-out {
  0% {
    opacity: 1;
    @include transform(translateX(0) rotate(0));
  }
  100% {
    opacity: 0;
    @include transform(translateX(100%) rotate(120deg));
  }
}
@keyframes animation-roll-out {
  0% {
    opacity: 1;
    @include transform(translateX(0) rotate(0));
  }
  100% {
    opacity: 0;
    @include transform(translateX(100%) rotate(120deg));
  }
}

/* # Animation
================================================== */
.animation {
  @include animation-duration(1s);
  @include animation-fill-mode(both);
  position: relative;
}

/* # Names
================================================== */
.animation-bounce { @include animation-name(animation-bounce); }
.animation-flash { @include animation-name(animation-flash); }
.animation-pulse { @include animation-name(animation-pulse); }
.animation-shake { @include animation-name(animation-shake); }
.animation-swing {
  @include animation-name(animation-swing);
  @include transform-origin(top center);
}
.animation-tada { @include animation-name(animation-tada); }
.animation-wobble { @include animation-name(animation-wobble); }
.animation-bounce-in { @include animation-name(animation-bounce-in); }
.animation-bounce-in-down { @include animation-name(animation-bounce-in-down); }
.animation-bounce-in-left { @include animation-name(animation-bounce-in-left); }
.animation-bounce-in-right { @include animation-name(animation-bounce-in-right); }
.animation-bounce-in-up { @include animation-name(animation-bounce-in-up); }
.animation-bounce-out { @include animation-name(animation-bounce-out); }
.animation-bounce-out-down { @include animation-name(animation-bounce-out-down); }
.animation-bounce-out-left { @include animation-name(animation-bounce-out-left); }
.animation-bounce-out-right { @include animation-name(animation-bounce-out-right); }
.animation-bounce-out-up { @include animation-name(animation-bounce-out-up); }
.animation-fade-in { @include animation-name(animation-fade-in); }
.animation-fade-in-down { @include animation-name(animation-fade-in-down); }
.animation-fade-in-down-big { @include animation-name(animation-fade-in-down-big); }
.animation-fade-in-left { @include animation-name(animation-fade-in-left); }
.animation-fade-in-left-big { @include animation-name(animation-fade-in-left); }
.animation-fade-in-right { @include animation-name(animation-fade-in-right); }
.animation-fade-in-right-big { @include animation-name(animation-fade-in-right-big); }
.animation-fade-in-up { @include animation-name(animation-fade-in-up); }
.animation-fade-in-up-big { @include animation-name(animation-fade-in-up-big); }
.animation-fade-out { @include animation-name(animation-fade-out); }
.animation-fade-out-down { @include animation-name(animation-fade-out-down); }
.animation-fade-out-down-big { @include animation-name(animation-fade-out-down-big); }
.animation-fade-out-left { @include animation-name(animation-fade-out-left); }
.animation-fade-out-left-big { @include animation-name(animation-fade-out-left-big); }
.animation-fade-out-right { @include animation-name(animation-fade-out-right); }
.animation-fade-out-right-big { @include animation-name(animation-fade-out-right-big); }
.animation-fade-out-up { @include animation-name(animation-fade-out-up); }
.animation-fade-out-up-big { @include animation-name(animation-fade-out-up-big); }
.animation-flip { @include animation-name(animation-flip); }
.animation-flip-in-x { @include animation-name(animation-flip-in-x); }
.animation-flip-in-y { @include animation-name(animation-flip-in-y); }
.animation-flip-out-x { @include animation-name(animation-flip-out-x); }
.animation-flip-out-y { @include animation-name(animation-flip-out-y); }
.animation-flip,
.animation-flip-in-x,
.animation-flip-in-y,
.animation-flip-out-x,
.animation-flip-out-y { @include backface-visibility(visible); }
.animation-light-speed-in {
  @include animation-name(animation-light-speed-in);
  @include animation-timing-function(ease-out);
}
.animation-light-speed-out {
  @include animation-name(animation-light-speed-out);
  @include animation-timing-function(ease-in);
}
.animation-rotate-in { @include animation-name(animation-rotate-in); }
.animation-rotate-in-down-left { @include animation-name(animation-rotate-in-down-left); }
.animation-rotate-in-down-right { @include animation-name(animation-rotate-in-down-right); }
.animation-rotate-in-up-left { @include animation-name(animation-rotate-in-up-left); }
.animation-rotate-in-up-right { @include animation-name(animation-rotate-in-up-right); }
.animation-rotate-out { @include animation-name(animation-rotate-out); }
.animation-rotate-out-down-left { @include animation-name(animation-rotate-out-down-left); }
.animation-rotate-out-down-right { @include animation-name(animation-rotate-out-down-right); }
.animation-rotate-out-up-left { @include animation-name(animation-rotate-out-up-left); }
.animation-rotate-out-up-right { @include animation-name(animation-rotate-out-up-right); }
.animation-slide-in-down { @include animation-name(animation-slide-in-down); }
.animation-slide-in-left { @include animation-name(animation-slide-in-left); }
.animation-slide-in-right { @include animation-name(animation-slide-in-right); }
.animation-slide-out-left { @include animation-name(animation-slide-out-left); }
.animation-slide-out-right { @include animation-name(animation-slide-out-right); }
.animation-slide-out-up { @include animation-name(animation-slide-out-up); }
.animation-hinge {
  @include animation-duration(2s);
  @include animation-name(animation-hinge);
  @include animation-timing-function(ease-in-out);
}
.animation-roll-in { @include animation-name(animation-roll-in); }
.animation-roll-out { @include animation-name(animation-roll-out); }

/* # Delays
================================================== */
.animation.animation-delay-shortest { @include animation-delay(0.25s); }
.animation.animation-delay-shorter { @include animation-delay(0.5s); }
.animation.animation-delay-short { @include animation-delay(0.75s); }
.animation.animation-delay-default { @include animation-delay(1s); }
.animation.animation-delay-long { @include animation-delay(1.25s); }
.animation.animation-delay-longer { @include animation-delay(1.5s); }
.animation.animation-delay-longest { @include animation-delay(1.75s); }

/* # Durations
================================================== */
.animation.animation-duration-fastest { @include animation-duration(0.25s); }
.animation.animation-duration-faster { @include animation-duration(0.5s); }
.animation.animation-duration-fast { @include animation-duration(0.75s); }
.animation.animation-duration-default { @include animation-duration(1s); }
.animation.animation-duration-slow { @include animation-duration(1.25s); }
.animation.animation-duration-slower { @include animation-duration(1.5s); }
.animation.animation-duration-slowest { @include animation-duration(1.75s); }