Fork of Tomeij's Animation mixin

SassMeister-input.scss

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

@mixin animation($args...) {
  $name: unique-id(); // name for @keyframes
  $args: join((), $args, 'space'); // conform args as SSV
  animation: $name + ' ' + $args;
  @keyframes #{$name} {
    @content;
  }
}
// alias of above
@mixin anim($args...) { @include animation($args...) { @content; } }


.test1 {
  @include anim(0.5s ease-in) {
    from { background-position: 0% 0%; }
    to { background-position: 114.2857% 0%; }
  }
}

.test2 {
  @include anim(1s, ease-out) {
    from { width: 2rem; }
    to { width: 5rem; }
  }
}

SassMeister-output.css

.test1 {
  animation: urudhohfy 0.5s ease-in;
}
@keyframes urudhohfy {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: 114.2857% 0%;
  }
}
.test2 {
  animation: urudhohg6 1s ease-out;
}
@keyframes urudhohg6 {
  from {
    width: 2rem;
  }
  to {
    width: 5rem;
  }
}