title: Sass Mixin for animation keyframe which includes multiple stages and transform property
body: <p>Here is the standard CSS I am trying to produce but want to use a SASS Mixin to do the work.</p>
  
  <p>STANDARD CSS</p>
  
  <pre><code>@-webkit-keyframes crank-up {
    100% { -webkit-transform: rotate(360deg);}
  }
  @-moz-keyframes crank-up {
    100% { -moz-transform: rotate(360deg);}
  }
  @-o-keyframes crank-up {
    100% { -o-transform: rotate(360deg);}
  }
  keyframes crank-up {
    100% { transform: rotate(360deg);}
  }
  </code></pre>
  
  <p>I'm using the same mixin as in the following post <a href="https://stackoverflow.com/questions/17748745/sass-keyframes-not-compiling-as-wanted">SASS keyframes not compiling as wanted</a> which is shown below.</p>
  
  <p>MIXIN</p>
  
  <pre><code>@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        @content;
    }
    @-moz-keyframes #{$name} {
        @content;
    }
    @-ms-keyframes #{$name} {
        @content;
    }
    @keyframes #{$name} {
        @content;
    }
  }
  </code></pre>
  
  <p>The above is OK, as long as none of the keyframes include a property that requires a vendor prefix. Like the transform property as all the vendor prefixed keyframes get applied with (in this case) the -webkit- prefix.
  For example:</p>
  
  <p>SCSS</p>
  
  <pre><code>@include keyframes(crank-up) {
    100% { -webkit-transform: rotate(360deg);}
  }
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>@-webkit-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }
  @-moz-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }
  @-ms-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }
  @keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } }
  </code></pre>
  
  <p>Notice the above, -webkit- with a -moz-keyframe. Should be -moz-</p>
  
  <p>So, my first thought was to alter the above mixin to: </p>
  
  <p>ALTERED MIXIN</p>
  
  <pre><code>@mixin keyframes($first-name, $last-name, $argument) {
    @-webkit-keyframes #{$first-name} {
      -webkit-#{$last-name}: #{$argument};
    }
    @-moz-keyframes #{$first-name} {
      -moz-#{$last-name}: #{$argument};
    }
    @-o-keyframes #{$first-name} {
      -o-#{$last-name}: #{$argument};
    }
    @keyframes #{$first-name} {
      #{$last-name}: #{$argument};
    } 
  }
  </code></pre>
  
  <p>With a call to the mixin looking like </p>
  
  <p>SCSS</p>
  
  <pre><code>@include keyframes(crank-up, transform, rotate(360deg)) { }
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>@-webkit-keyframes crank-up { -webkit-transform: rotate(360deg); }
  @-moz-keyframes crank-up { -moz-transform: rotate(360deg); }
  @-o-keyframes crank-up { -o-transform: rotate(360deg); }
  @keyframes crank-up { transform: rotate(360deg); }
  </code></pre>
  
  <p>This works all ok if there is only ONE Keyframe 'stage' (see in original code - top of page, there's only the 100% mark), excuse if my terminology is slightly off in reference to keyframe 'stage'.</p>
  
  <p>PROBLEM</p>
  
  <p>I want a mixin like the above to work with something like.</p>
  
  <pre><code>@-webkit-keyframes crank-up {
    20%,
    40% { -webikit-transform: translateY(34px); }
    80% { opacity: .8; }
    100% { -webkit-transform: rotate(360deg);}
  }
  </code></pre>
  
  <p>I have also looked into the two Compass Animate plugins; <a href="https://github.com/ericam/compass-animation" rel="nofollow noreferrer">compass-animation</a> and the newer <a href="https://github.com/ericam/compass-animate" rel="nofollow noreferrer">compass-animate</a> but not really sure if these can help. I need some way of adding in a variable and testing for this with a mixin but don't know if it's possible to pass variable into mixins.</p>
  
  <p>Any help much appreciated. Thanks</p>
  
  <p>I've been playing around with the following but neither work, just thought I'd add them up to see if anyone knows where I'm going wrong.</p>
  
  <p>EXPERIMENTAL MIXINS:</p>
  
  <pre><code>@mixin vendor-prefix($name, $argument, $webkit: "-webkit-", $moz: "-moz-",$o: "-o-", $stale: ""){
    #{$webkit}: #{$name}: #{$argument};
    #{$moz}: #{$name}: #{$argument};
    #{$o}: #{$name}: #{$argument};
    #{$stale}: #{$name}: #{$argument};
  }
  
  @mixin vendor-prefix($last-name, $argument){
    @if $name == webkit { 
      -webkit-#{$name}: #{$argument};
    } @else if $name == moz { 
      -moz-#{$name}: #{$argument};
    } @else if $name == o { 
      -o-#{$name}: #{$argument};
    } @else { 
      #{$name}: #{$argument};
    } 
  }
  </code></pre>