// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable. // Example: @include transition (all 2s ease-in-out); // @include transition (opacity 1s ease-in 2s, width 2s ease-out); // @include transition-property (transform, opacity);

@mixin transition ($properties…) {

// Fix for vendor-prefix transform property
$needs-prefixes: false;
$webkit: ();
$moz: ();
$spec: ();

// Create lists for vendor-prefixed transform
@each $list in $properties {
  @if nth($list, 1) == "transform" {
    $needs-prefixes: true;
    $list1: -webkit-transform;
    $list2: -moz-transform;
    $list3: ();

    @each $var in $list {
      $list3: join($list3, $var);

      @if $var != "transform" {
        $list1: join($list1, $var);
        $list2: join($list2, $var);
      }
    }

    $webkit: append($webkit, $list1);
       $moz: append($moz,    $list2);
      $spec: append($spec,   $list3);
  }

  // Create lists for non-prefixed transition properties
  @else {
    $webkit:  append($webkit, $list, comma);
    $moz:     append($moz,    $list, comma);
    $spec:    append($spec,   $list, comma);
  }
}

@if $needs-prefixes {
  -webkit-transition: $webkit;
     -moz-transition: $moz;
          transition: $spec;
}
@else {
  @if length($properties) >= 1 {
    @include prefixer(transition, $properties, webkit moz spec);
  }

  @else {
    $properties: all 0.15s ease-out 0s;
    @include prefixer(transition, $properties, webkit moz spec);
  }
}

}

@mixin transition-property ($properties…) {

-webkit-transition-property: transition-property-names($properties, 'webkit');
   -moz-transition-property: transition-property-names($properties, 'moz');
        transition-property: transition-property-names($properties, false);

}

@mixin transition-duration ($times…) {

@include prefixer(transition-duration, $times, webkit moz spec);

}

@mixin transition-timing-function ($motions…) { // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()

@include prefixer(transition-timing-function, $motions, webkit moz spec);

}

@mixin transition-delay ($times…) {

@include prefixer(transition-delay, $times, webkit moz spec);

}