Smooth SASS animations @mixin - http://sassmeister.com/gist/7995928.

input.html

<div class="test-div"></div>

input.scss

// Prefixer
@mixin prefixr ($attr, $value, $prefixes) {
  @each $prefix in $prefixes {
    @if $prefix == webkit {
      -webkit-#{$attr}: $value;
    }
    @else if $prefix == cstm {
      #{$attr}: $value;
    }
  }
}
// Animations
@mixin anim-cstm($name, $coords: 0 0 0) {
  $duration: nth($coords, 1);
  $delay: nth($coords, 2);
  $iteration: nth($coords, 3);
  @include prefixr(animation-name, $name, webkit cstm);
  @include prefixr(animation-duration, $duration, webkit cstm);
  @include prefixr(animation-delay, $delay, webkit cstm);
  @if type-of($iteration) == number and unitless($iteration) or type-of($iteration) != number {
    @include prefixr(animation-iteration-count, $iteration, webkit cstm);
  }
  @else if type-of($iteration) == number and not unitless($iteration) {
    @include prefixr(animation-iteration-count, 1, webkit cstm);
  }
}
  // Keyframes
  // use always with anim-cstm() @mixin
  // name value need to be the same as anim-cstm() @mixin name value
  @mixin anim-kf($name) {
    @at-root {
      @-webkit-keyframes $name { @content; }
      // @-moz-keyframes $name { @content; }
      // @-o-keyframes $name { @content; }
      @keyframes $name { @content; }
    }
  }

div {
  width: 0; height: 200px;
  background-color: #000;
  @include anim-cstm(fadeout, 2s 0 infinite);
  @include anim-kf(fadeout){
    0% { opacity: 1; width: 0;}
    50% { opacity: 0; width: 300px;}
    100% {opacity: 1; width: 0;}
  }
}

output.css

div {
  width: 0;
  height: 200px;
  background-color: #000;
  -webkit-animation-name: fadeout;
  animation-name: fadeout;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-delay: 0;
  animation-delay: 0;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
@-webkit-keyframes fadeout {
  0% {
    opacity: 1;
    width: 0;
  }
  50% {
    opacity: 0;
    width: 300px;
  }
  100% {
    opacity: 1;
    width: 0;
  }
}
@keyframes fadeout {
  0% {
    opacity: 1;
    width: 0;
  }
  50% {
    opacity: 0;
    width: 300px;
  }
  100% {
    opacity: 1;
    width: 0;
  }
}