// @transition($property, $duration, $easing, $delay, $propertyprefix, $ms)

// $property - space separated list of properties that need to animate
// $duration - duration of the transition - Defaults to 1s
// $easing - easing of the transition - Defaults to false (no easing)
// $delay - the delay of the transition - Defaults to false (no delay)
// $propertyprefix if the property needs to be prefixed - Defaults to false
// $ms - if special IE support is needed - Defaults to true

@mixin transition($property, $duration: 1s, $easing: false, $delay: false, $propertyprefix: false, $ms: true) {
  // $browsers: -webkit- -moz- -o-;
  $browsers: -webkit-;
  // add ms support
  @if $ms {
    $browsers: append($browsers, -ms-);
  }
  // add none prefixed
  $browsers: append($browsers, none);
  // add prefixes to the mix
  @each $browser in $browsers {
    $transition: ();

    @if $property == none {
      $transition: none;
    } @else {
      @for $i from 1 through length($property) {
        // property (prefixed or not)
        @if $browser == none {
          $transition: append($transition, nth($property, $i));
        } @else if length($propertyprefix) > 1 and nth($propertyprefix, $i) or $propertyprefix == true {
          $transition: append($transition, $browser + nth($property, $i));
        } @else {
          $transition: append($transition, nth($property, $i));
        }
        // duration
        @if length($duration) > 1 and nth($duration, $i) {
          $transition: append($transition, nth($duration, $i));
        } @else {
          $transition: append($transition, $duration);
        }
        // delay
        @if length($delay) > 1 and nth($delay, $i) {
          $transition: append($transition, nth($delay, $i));
        } @else if $delay {
          $transition: append($transition, $delay);
        }
        // easing
        @if length($easing) > 1 and nth($easing, $i) {
          $transition: append($transition, nth($easing, $i));
        } @else if $easing {
          $transition: append($transition, $easing);
        }

        @if length($property) > $i {
          $transition: #{$transition + ','};
        }
      }
    }
    // add prefixed transition
    @if $browser == none {
      transition: $transition;
    } @else {
      #{$browser + 'transition'}: $transition;
    }
  }
}