Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="foo">
  Hello World
</div>

SassMeister-input.scss

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

$animations: (
  'fade-in': (
    0%: (
      opacity: 0
    ),
    100%: (
      opacity: 1
    )
  ),
  'slide-in' : (
    0%: ( 
      transform: translateY(-100%)
    ),
    100%: (
      transform: translateY(0)
    )
  )
);

@mixin animate($name) {
  @if map-has-key($animations, $name) {
    @keyframes #{$name} {
      @each $position, $change in map-get($animations, $name) {
        #{$position} {
          @each $prop, $val in $change {
            #{$prop}: #{$val}
          }
        }
      }
    }
  }
}

@include animate('fade-in');

@include animate('slide-in');

SassMeister-output.css

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slide-in {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

SassMeister-rendered.html

<div class="foo">
  Hello World
</div>