Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

$animations: (); // global placeholder to store a list of animations that have been used

// @author Tyler Benton
// @description
// This is used in an attempt to prevent unused `@keyframes` 
//from being compiled unless they're actually used
// @arg {string} - name of the keyframe
@mixin placeholder-animation($name){
  animation-name: $name;
  @if index($animations, $name){
    @keyframes #{$name}{
      @content;
    } 
  }
}

// @author Tyler Benton
// @arg {string} - name of the animation
// @arg {boolean} - determins if you want to extend onto it or just add it
@mixin animation($name, $extend: true){
  $animations: append($animations, $name) !global;
  @if $extend{
    @extend %u-animation--#{$name}; 
  }@else{
    animation-name: $name;
  }
}

// if the selector it's used on is before the defined keyframe this works
.foo{
  @include animation(pulse);
}

%u-animation{
  &--pulse{
    selector: &;
    /* pulse placeholder */
    @include placeholder-animation(pulse){
      0%{
        transform: scale3d(1, 1, 1);
      }
      50%{
        transform: scale3d(1.05, 1.05, 1.05);
      }
      100%{
        transform: scale3d(1, 1, 1);
      }
    }
  }
  &--rubber-band{
    
  /* rubber-band placeholder */
   @include placeholder-animation(rubber-band){
    0%{
     transform: scale3d(1, 1, 1);
    }
    30%{
     transform: scale3d(1.25, .75, 1);
    }
    40%{
     transform: scale3d(.75, 1.25, 1);
    }
    50%{
     transform: scale3d(1.15, .85, 1);
    }
    65%{
     transform: scale3d(.95, 1.05, 1);
    }
    75%{
     transform: scale3d(1.05, .95, 1);
    }
    100%{
     transform: scale3d(1, 1, 1);
    }
   }
  }
  
  &--shake{
  /* shake placeholder */
   @include placeholder-animation(shake){
    0%, 100%{
     transform: translate3d(0, 0, 0);
    }
    10%, 30%, 50%, 70%, 90%{
     transform: translate3d(-10px, 0, 0);
    }
    20%, 40%, 60%, 80%{
     transform: translate3d(10px, 0, 0);
    }
   }
  }
}

// It doesn't work if you define the keyframes before you try to call it.
// But as you can see it does get extended correctly after you define out the animations
.bar{
  @include animation(shake);
  background: black;
}

SassMeister-output.css

.foo {
  selector: %u-animation--pulse;
  /* pulse placeholder */
  animation-name: pulse;
}

@keyframes pulse {
  0% {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

.bar {
  /* shake placeholder */
  animation-name: shake;
}

.bar {
  background: black;
}