Shorthand Sass mixin for working with transtions

transition.scss

// -----------------------------------------------------------------------------
// Transitions
// -----------------------------------------------------------------------------

// Uses prefixr mixin gist:
// https://gist.github.com/defo550/7073344

// Example:
// @include transition( all 0.2s ease );
// @include transtion( opacity 0.2s ease, height 0.3s ease )
// @include transition-delay( 2s, 3s );

@mixin transition( $transitions... ) {
  $has-transforms: false;
  $webkit: ();
  $standard: ();

  @each $transition in $transitions {
    @if nth($transition, 1) == 'transform' {
      $has-transforms: true;
      $webkit-transform: -webkit-transform;
      $standard-transform: ();

      @each $val in $transition {
        $standard-transform: join($standard-transform, $val);

        @if $val != 'transform' {
          $webkit-transform: join($webkit-transform, $val);
        }
      }

      $webkit: append($webkit, $webkit-transform);
      $standard: append($standard, $standard-transform);
    }
    @else {
      $webkit: append($webkit, $transition, comma);
      $standard: append($standard, $transition, comma);
    }
  }

  @if $has-transforms {
    -webkit-transition: $webkit;
    transition: $standard;
  }
  @else {
    @include prefixr( transition, $transitions, webkit );
  }
}

@mixin transition-property( $values... ) {
  $has-transforms: false;
  $webkit: ();
  $standard: ();

  @each $value in $values {
    @if $value == 'transform' {
      $has-transforms: true;
      $webkit-transform: -webkit-transform;

      $webkit: append($webkit, $webkit-transform);
      $standard: append($standard, $value);
    }

    @if $value != 'transform' {
      $webkit: append($webkit, $value, comma);
      $standard: append($standard, $value, comma);
    }
  }

  @if $has-transforms {
    -webkit-transition-property: $webkit;
    transition-property: $standard;
  }
  @else {
    @include prefixr( transition-property, $values, webkit );
  }
}

@mixin transition-delay( $values... ) {
  @include prefixr( transition-delay, $values, webkit );
}

@mixin transition-duration( $values... ) {
  @include prefixr( transition-duration, $values, webkit );
}

@mixin transition-timing-function( $values... ) {
  @include prefixr( transition-timing-function, $values, webkit );
}