Sass Mixin for animation keyframe which includes multiple stages and transform property

Question

Here is the standard CSS I am trying to produce but want to use a SASS Mixin to do the work.

STANDARD CSS

@-webkit-keyframes crank-up {
  100% { -web         


        

Answer 1

If you are already using Compass and don't want to load whole bounce of extra library and just want to write some mixing then THIS is the best option.

/* animation mixing
keyframe animation
@include animation('animation-name .4s 1')*/

@mixin animation($animate...) {
$max: length($animate);
$animations: '';

@for $i from 1 through $max {
    $animations: #{$animations + nth($animate, $i)};

    @if $i < $max {
        $animations: #{$animations + ", "};
    }
}
-webkit-animation: $animations;
-moz-animation:    $animations;
-o-animation:      $animations;
animation:         $animations;
}

And here is the keyframe Mixing to include CSS3 properties inside particular browser vender prefix, instead of @include translate, we use the full css (Note: if you're using Sass 3.3 or older, you'll need to remove the !global flag):

@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        $browser: '-webkit-' !global;
        @content;
    }
    @-moz-keyframes #{$animationName} {
        $browser: '-moz-' !global;
        @content;
    }
    @-o-keyframes #{$animationName} {
        $browser: '-o-' !global;
        @content;
    }
    @keyframes #{$animationName} {
        $browser: '' !global;
        @content;
    }
} $browser: null;

For your reference here is the SASS example:

@include keyframes(animation-name) {
   0% {
       #{$browser}transform: translate3d(100%, 0, 0);
   }
   100% {
      #{$browser}transform: translate3d(0%, 0, 0);
   }
}

And here how you include your animation to the particular class or ids

.new-class {
@include animation('animation-name 5s linear');
}

That's all.