Generated by SassMeister.com.

SassMeister-input.scss

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

//timing functions
$ibm-easein: cubic-bezier(.240, 0, .285, .995);
$ibm-easeout: cubic-bezier(.725, .005, .695, 1);

$ibm-bounceout: cubic-bezier(.520, -.270, .345, 1.005);
$ibm-bouncein: cubic-bezier(.805, .005, .410, 1.280);
$ibm-bounceinout: cubic-bezier(.555, -.270, .370, 1.350);

$ibm-snapin: cubic-bezier(1, 0, .765, 1);
$ibm-snapout: cubic-bezier(.155, 0, 0, .995);
$ibm-snapinout: cubic-bezier(.920, .010, .050, 1);

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

$included-animations: ();

//@include include-animation($animation-name)
//@include include-animation(fadeIn)
@mixin include-animation($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}
          }
        }
      }
    }
  }

  @else {
    @error "Make sure your syntax is: @include animate(<animation-name>, <duration>, <timing>); and that the animation exists";
    //'We could not find the animation you were looking for. Here are the available animations' + map-get-keys($animations)
  }
};

@mixin animate($name, $duration: 2s, $timing: ease-in) {
  $exists: index($included-animations, '#{$name}');
  @if not $exists {
    @at-root {
      @include include-animation($name);
    }
    $included-animations: append($included-animations, '#{$name}') !global;
  }
  animation: $name $duration $timing;
}

.hello {
  @include animate(fade-in);
}

.meow {
  @include animate(fade-in, 4s);
}

.kjdsfh {
  @include animate(slide-in--left, 3s, ease-out);
  content: $included-animations;
}

SassMeister-output.css

.hello {
  animation: fade-in 2s ease-in;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.meow {
  animation: fade-in 4s ease-in;
}

.kjdsfh {
  animation: slide-in--left 3s ease-out;
  content: "fade-in" "slide-in--left";
}
@keyframes slide-in--left {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}