Animation Mixins

animation-mixins.scss

@mixin keyframe($animation) {
  @-webkit-keyframes #{$animation} {
    @content;
  }

  @-moz-keyframes #{$animation} {
    @content;
  }

  @keyframes #{$animation} {
    @content;
  }
}

@include keyframe(fadein) {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


@include keyframe(fadein-and-down) {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(10px);
  }
}


@mixin intro-animation($delay, $duration, $animation) {
  -webkit-animation-delay: $delay;
  -webkit-animation-duration: $duration;
  -webkit-animation-name: $animation;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-delay: $delay;
  -moz-animation-duration: $duration;
  -moz-animation-name: $animation;
  -moz-animation-fill-mode: forwards;
  animation-delay: $delay;
  animation-duration: $duration;
  animation-name: $animation;
  animation-fill-mode: forwards;
  opacity: 0;
}