.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animated-fast {
  animation-duration: .5s;
  animation-fill-mode: both;
}

.animated-faster {
  animation-duration: .3s;
  animation-fill-mode: both;
}

.animated-fastest {
  animation-duration: .15s;
  animation-fill-mode: both;
}

.spin {
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}

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

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


.spin-open {
  -webkit-animation: spin-open .5s;
  animation: spin-open .5s;
  animation-fill-mode: both;
}

@-webkit-keyframes spin-open {
  100% {
    -webkit-transform: rotate(-90deg);
  }
}

@keyframes spin-open {
  100% {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
}

// FadeIn animations
// Reference with fadeInKeyframes(60) = fadeIn60
@include fade-in-keyframes(60);
@include fade-in-keyframes(30);
@include fade-in-keyframes(15);

$zoom-in-soft-scale: 0.9;
@keyframes zoomInSoft {
  from {
    opacity: 0;
    transform: scale3d($zoom-in-soft-scale, $zoom-in-soft-scale, $zoom-in-soft-scale);
  }

  50% {
    opacity: 1;
  }
}

$fall-in-soft-scale: 1.1;
@keyframes fallInSoft {
  from {
    opacity: 0;
    transform: scale3d($fall-in-soft-scale, $fall-in-soft-scale, $fall-in-soft-scale);
  }

  50% {
    opacity: 1;
  }
}

@keyframes slideInAside {
  from {
    transform: translateX(550px);
  }

  100% {
    transform: translateX(0px);
  }
}

.flash-new {
  animation: flashNew .75s ease-out;
}

@keyframes flashNew {
  from {
    background-color: inherit;
  }

  50% {
    background-color: $yellow-200;
  }

  100% {
    background-color: inherit;
  }
}

.twist {
  animation-fill-mode: forwards;
  animation-duration: .2s;
  transform-origin: 10px 6px;
}

.twist-open {
  @extend .twist;
  animation-timing-function: ease-out;
  animation-name: twist-open;
}

.twist-closed {
  @extend .twist;
  animation-timing-function: ease-out;
  animation-name: twist-closed;
}

@keyframes twist-open {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-180deg);
  }
}

@keyframes twist-closed {
  0% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

// Pulse
@keyframes pulse {
  50% {
    transform: scale(1.05);
  }

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