.animated {
  animation-fill-mode: both;
  animation-duration: 400ms;
  animation-timing-function: easeOutCirc;
  &.infinite {
    animation-iteration-count: infinite;
  }
}

@for $delay from 1 through 100 {
  $i: $delay * 100;
  .delay-#{$i} {
    animation-delay: $i + ms !important;
  }
}

@include keyframes(spin) {
  0% {
    @include rotate(0deg);
  }
  100% {
    @include rotate(359deg);
  }
}

.spin {
  @include animation(spin 2s linear infinite);
}

@include keyframes(flash) {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}

.flash {
  animation-name: flash;
}

@include keyframes(flashbulb) {
  50% {
    box-shadow: inset 0px 0px 100px 100px #ffffdc, 0px 0px 30px 10px #ffffdc;
  }
}

.flashbulb {
  @include animation(flashbulb 1s linear infinite alternate);
}

@include keyframes(rubberBand) {
  0% {
    @include scale3d(1, 1, 1);
  }
  30% {
    @include scale3d(1.25, 0.75, 1);
  }
  40% {
    @include scale3d(0.75, 1.25, 1);
  }
  50% {
    @include scale3d(1.15, 0.85, 1);
  }
  65% {
    @include scale3d(0.95, 1.05, 1);
  }
  75% {
    @include scale3d(1.05, 0.95, 1);
  }
  100% {
    @include scale3d(1, 1, 1);
  }
}

.rubberBand {
  animation-name: rubberBand;
}

@include keyframes(shake) {
  0%,
  100% {
    @include translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    @include translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    @include translate3d(10px, 0, 0);
  }
}

.shake {
  animation-name: shake;
}

@include keyframes(glow) {
  0% {
    @include box-shadow(0px 0px 0px var(--white-alpha9));
  }
  100% {
    @include box-shadow(0px 0px 25px var(--white-alpha9));
  }
}

.glow {
  @include animation(glow 0.5s ease infinite alternate);
}

@include keyframes(inner-glow) {
  0% {
    @include box-shadow(0px 0px 0px var(--white-alpha9) inset);
  }
  100% {
    @include box-shadow(0px 0px 25px var(--white-alpha9) inset);
  }
}

.inner-glow {
  @include animation(glow 0.5s ease infinite alternate);
}

@include keyframes(shine) {
  0% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

.shine {
  background: -webkit-linear-gradient(
        right bottom,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0.4) 45%,
        white 50%,
        rgba(255, 255, 255, 0.4) 55%,
        rgba(255, 255, 255, 0) 70%
      )
      no-repeat,
    #0066aa;
  background: -moz-linear-gradient
      (
        right bottom,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0.4) 45%,
        white 50%,
        rgba(255, 255, 255, 0.4) 55%,
        rgba(255, 255, 255, 0) 70%
      )
      no-repeat,
    #0066aa;
  background-size: 500% 300%;
  animation-name: inner-glow, shine;
  animation-duration: 0.5s, 1s;
  animation-timing-function: ease-in, ease;
  animation-delay: 0s, 0s;
  animation-iteration-count: infinite, infinite;
  animation-direction: alternate, normal;
}

@include keyframes(swing) {
  20% {
    @include rotate3d(0, 0, 1, 15deg);
  }
  40% {
    @include rotate3d(0, 0, 1, -10deg);
  }
  60% {
    @include rotate3d(0, 0, 1, 5deg);
  }
  80% {
    @include rotate3d(0, 0, 1, -5deg);
  }
  100% {
    @include rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  transform-origin: top center;
  animation-name: swing;
}

@include keyframes(tada) {
  0% {
    @include scale3d(1, 1, 1);
  }
  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
    @include scale3d(1, 1, 1);
  }
}

.tada {
  animation-name: tada;
}

@include keyframes(blink) {
  0% {
    opacity: 1;
  }
  49% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
}

.blink {
  animation: blink 0.4s infinite;
}

#barcode {
  background: -webkit-linear-gradient(
        top,
        rgba(230, 0, 0, 0) 40%,
        rgba(230, 0, 0, 0.1) 45%,
        rgba(230, 0, 0, 0.6) 49%,
        #ff1414 50%,
        rgba(230, 0, 0, 0.6) 51%,
        rgba(230, 0, 0, 0.1) 55%,
        rgba(230, 0, 0, 0) 60%
      )
      no-repeat,
    #0066aa;
  background: -moz-linear-gradient(
        top,
        rgba(230, 0, 0, 0) 40%,
        rgba(230, 0, 0, 0.1) 45%,
        rgba(230, 0, 0, 0.6) 49%,
        #ff1414 50%,
        rgba(230, 0, 0, 0.6) 51%,
        rgba(230, 0, 0, 0.1) 55%,
        rgba(230, 0, 0, 0) 60%
      )
      no-repeat,
    #0066aa;
  @include background-size(100%, 300%);
  @include animation(barcode 1s ease infinite alternate);
}

@import './3d';
@import './jelly';
@import './fade';
@import './flip';
@import './bounce';
@import './bellRinging';
@import './hinge';
@import './roll';
@import './drop';
@import './pulse';
@import './pulseGrow';
@import './ringing';
@import './signals';
@import './slide';
@import './lightSpeed';
@import './vibrate';
@import './zoom';
@import './pre-loaders';
@import './page-loaders';