transition-mixin.scss

// VENDOR-PREFIX CSS TRANSITIONS
// USAGE: @include transition(transform 0.2s ease-in 0.2s, opacity 0.2s ease);

@function prefix($property, $prefixes: (webkit moz o ms)) {
    $vendor-prefixed-properties: transform background-clip background-size;
    $result: ();

    @each $prefix in $prefixes {
       @if index($vendor-prefixed-properties, $property) {
         $property: -#{$prefix}-#{$property}
       }

       $result: append($result, $property);
    }

    @return $result;
}

@function trans-prefix($transition, $prefix: moz) {
    $prefixed: ();
    @each $trans in $transition {
        $prop-name: nth($trans, 1);
        $vendor-prop-name: prefix($prop-name, $prefix);
        $prop-vals: nth($trans, 2);

        $prefixed: append($prefixed, ($vendor-prop-name $prop-vals), comma);
    }

    @return $prefixed;
}


@mixin transition($values...) {

   $transitions: ();
   @each $declaration in $values {
      $prop: nth($declaration, 1);
      $prop-opts: ();
      $length: length($declaration);
      @for $i from 2 through $length {
        $prop-opts: append($prop-opts, nth($declaration, $i));
      }

      $trans: ($prop, $prop-opts);
      $transitions: append($transitions, $trans, comma);
   }

   // $transitions = (opacity, (0.2s ease)), (transform, (0.5s ease-in))

  -webkit-transition: trans-prefix($transitions, webkit);
  -moz-transition: trans-prefix($transitions, moz);
  -o-transition: trans-prefix($transitions, o);
  transition: $values;
}