config-animation mixin for sass/compass

Sass Compass Animation Mixin

// ----
// Sass (v3.4.11)
// Compass (v1.0.3)
// ----


@import "compass/css3/animation";

// Helpful for when you want an animation shorthand mixin that wont overwrite previous properties.
// If you don't care about overwriting previous properties just use Compass animation()
@mixin config-animation($args...) {
  $argsMap: keywords($args);
  @if map-has-key($argsMap, "name") { @include animation-name(map-get($argsMap, "name")) };
  @if map-has-key($argsMap, "duration") { @include animation-duration(map-get($argsMap, "duration")) };
  @if map-has-key($argsMap, "delay") { @include animation-delay(map-get($argsMap, "delay")) };
  @if map-has-key($argsMap, "timing") { @include animation-timing-function(map-get($argsMap, "timing")) };
  @if map-has-key($argsMap, "iteration") { @include animation-iteration-count(map-get($argsMap, "iteration")) };
  @if map-has-key($argsMap, "direction") { @include animation-direction(map-get($argsMap, "direction")) };
  @if map-has-key($argsMap, "fill-mode") { @include animation-fill-mode(map-get($argsMap, "fill-mode")) };
  @if map-has-key($argsMap, "play-state") { @include animation-play-state(map-get($argsMap, "play-state")) };

}

$blue: #9BE6FF;

.animated-class {
  display: inline-block;
  border-radius: 10px;
  color: #faf;
  width: 200px;
  padding: 20px 30px;
  border: 3px solid $blue;
}
.class-1 {
  @extend .animated-class;
  @include config-animation($name: "my-animation", $duration: .25s, $delay: 2s);  
}

.class-2 {
 @extend .animated-class;
}

body {
  padding: 20px;
  text-align: center;
  background-color: rgb(250, 250, 250);
  text-transform: uppercase;
  font-family: 'helvetica';
}

SassMeister-output.css

.animated-class, .class-1, .class-2 {
  display: inline-block;
  border-radius: 10px;
  color: #faf;
  width: 200px;
  padding: 20px 30px;
  border: 3px solid #9BE6FF;
}

.class-1 {
  -moz-animation-name: "my-animation";
  -webkit-animation-name: "my-animation";
  animation-name: "my-animation";
  -moz-animation-duration: 0.25s;
  -webkit-animation-duration: 0.25s;
  animation-duration: 0.25s;
  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

body {
  padding: 20px;
  text-align: center;
  background-color: #fafafa;
  text-transform: uppercase;
  font-family: 'helvetica';
}