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) {
    @each $position, $change in map-get($animations, $name) {
      @keyframe #{$name} {
        #{$position} {
          @each $prop, $val in $change {
            #{$prop}: #{$val}
          }
        }
      }
    }
  }
}

@include animate('fade-in');
@include animate('slide-in');

SassMeister-output.css

Invalid CSS after "": expected selector, was "0%"

SassMeister-rendered.html

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