/* ===== animate ===== */
@mixin animation($animate...) {
  $max: length($animate);
  $animations: '';

  @for $i from 1 through $max {
    $animations: #{$animations + nth($animate, $i)};

    @if $i < $max {
      $animations: #{$animations + ", "};
    }
  }
  -webkit-animation: $animations;
  -moz-animation:    $animations;
  -o-animation:      $animations;
  animation:         $animations;
}

@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
    @content;
  }
  @-moz-keyframes #{$animationName} {
    @content;
  }
  @-o-keyframes #{$animationName} {
    @content;
  }
  @keyframes #{$animationName} {
    @content;
  }
}

@include keyframes(animate-scale-opacity) {
  from {
    opacity: 0;
    @include transform(scale3d(0.3,0.3,1));
  }
}
@include keyframes(animate-opacity-bot-in) {
  from {
    opacity: 0;
    bottom: -100px;
  }
}
@include keyframes(animate-opacity-in) {
  from {
    opacity: 0;
  }
}
@include keyframes(animate-opacity-top-out) {
  to {
    opacity: 0;
    top: -500px;
  }
}