Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="hello">hello</div>

SassMeister-input.scss

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

@function remove-duplicates($list, $recursive: false) {
  $result: ();
  
  @each $item in $list {
    @if not index($result, $item) {
      @if length($item) > 1 and $recursive {
        $result: append($result, remove-duplicates($item, $recursive));
      }
      @else {
        $result: append($result, $item);
      }
    }
  }
  
  @return $result;
}

//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";
  }
};

@mixin animate($name, $duration: 2s, $timing: ease-in) {
  $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);
}

@each $animation in remove-duplicates($included-animations) {
  @include include-animation($animation);
}

SassMeister-output.css

.hello {
  animation: fade-in 2s ease-in;
}

.meow {
  animation: fade-in 4s ease-in;
}

.kjdsfh {
  animation: slide-in--left 3s ease-out;
}

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

SassMeister-rendered.html

<div class="hello">hello</div>