// studio animations & keyframes
// ====================

// rotate clockwise
@mixin rotateClockwise {
  0% {
    @include transform(rotate(0deg));
  }

  25% {
    @include transform(rotate(90deg));
  }

  50% {
    @include transform(rotate(180deg));
  }

  100% {
    @include transform(rotate(360deg));
  }
}

@-moz-keyframes rotateClockwise { @include rotateClockwise(); }
@-webkit-keyframes rotateClockwise { @include rotateClockwise(); }
@-o-keyframes rotateClockwise { @include rotateClockwise(); }
@keyframes rotateClockwise { @include rotateClockwise();}

// ====================

// bounce in
@mixin bounce-in {
  0% {
    opacity: 0;
    @include transform(scale(.3));
  }

  50% {
    opacity: 1;
    @include transform(scale(1.05));
  }

  100% {
    @include transform(scale(1));
  }
}

@-moz-keyframes bounce-in { @include bounce-in(); }
@-webkit-keyframes bounce-in { @include bounce-in(); }
@-o-keyframes bounce-in { @include bounce-in(); }
@keyframes bounce-in { @include bounce-in();}

@mixin bounce-in-animation($duration, $timing: ease-in-out) {
  @include animation-name(bounce-in);
  @include animation-duration($duration);
  @include animation-timing-function($timing);
  @include animation-fill-mode(both);
}