SCSS: animation behaviors

animation-behaviors.scss

// animation behaviors
// -------------------
$cubic-bezier: cubic-bezier(0.4, 0.0, 0.2, 1);

@mixin cubic-bezier {
  -webkit-transition: all 225ms cubic-bezier(0.4, 0.0, 0.2, 1);
  transition: all 225ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args;
}
@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
      @content;
  }
  @-moz-keyframes #{$animation-name} {
      @content;
  }
  @-ms-keyframes #{$animation-name} {
      @content;
  }
  @-o-keyframes #{$animation-name} {
      @content;
  }
  @keyframes #{$animation-name} {
      @content;
  }
}
@mixin animation($str) {
  -webkit-animation: #{$str};
  -moz-animation: #{$str};
  -ms-animation: #{$str};
  -o-animation: #{$str};
  animation: #{$str};
}

 @include animation('animation 375ms 1');