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

To deal with vendor-prefixers I recommend to use Autoprefixer instead of sass mixins.

Autoprefixer interface is simple: just forget about vendor prefixes and write normal CSS according to latest W3C specs. You don’t need a special language (like Sass) or special mixins.

Because Autoprefixer is a postprocessor for CSS, you can also use it with preprocessors, such as Sass, Stylus or LESS.

So, in your case, you just need to write this:

@keyframes crank-up {
  20%,
  40% { -webkit-transform: translateY(34px); }
  80% { opacity: .8; }
  100% { -webkit-transform: rotate(360deg);}
}

And autoprefixer converts it automatically to:

@-webkit-keyframes crank-up {
  20%, 40% {
    -webkit-transform: translateY(34px);
  }

  80% {
    opacity: .8;
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes crank-up {
  20%, 40% {
    -webkit-transform: translateY(34px);
  }

  80% {
    opacity: .8;
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

Autoprefixer is widely supported, you can process your scss or css styles with this tool through Compass, Grunt, Sublime Text, node.js, Ruby, Ruby on Rails, PHP...

Here is more info about the project