Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.0.rc.1)
// Compass (v1.0.0.alpha.20)
// ----

// List of animations
// ----
$animations: (
  "bounce-in": false,
  "bounce-out": false,
  "slide-in": false,
  "slide-out": false,
) !global;

// Mixin to activate keyframe and extend placeholder
// ----
@mixin animation($animation) {
  
  @if map-has-key($animations, "#{$animation}") {
    $animations: map-merge($animations, ("#{$animation}": true)) !global;
  }
  
  @extend %#{$animation} !optional;
}

// Placeholder
// ----
%bounce-in {
  animation: bounce-in 1s linear;
}

animate {
  @include animation('bounce-in');
  actives: inspect($animations);
}

// Keyframe that relies on animation being true
// ----
// This should go underneath the mixin call; so should be in
//   a seperate file, maybe called _keyframes.scss, etc.
//   Also should be loaded in _after_ the animation is
//   included in the file.
// ----
// @example: _animations.scss > _keyframes.scss
// ----
@if map-get($animations, "bounce-in") {
  @keyframes bounce-in {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-30px); }
    60% { transform: translateY(-15px); }
  }
}

SassMeister-output.css

animate {
  animation: bounce-in 1s linear;
}

animate {
  actives: ("bounce-in": true, "bounce-out": false, "slide-in": false, "slide-out": false);
}

@keyframes bounce-in {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}