Create cross browser CSS transitions easily using the CSS Transition Mixins.

CSS Transition Mixins.scss

// -----------------------------------------

	// Transitions

// -------------------------------------------

// example: @include single-transition(background, 1s, ease-in-out, 0);

@mixin single-transition($property, $duration, $timing-function, $delay) {
	-webkit-transition: $property $duration $timing-function $delay;
	-moz-transition: $property $duration $timing-function $delay;
	-o-transition: $property $duration $timing-function $delay;
	transition: $property $duration $timing-function $delay;
 }

// example: @include double-transition(background, 1s, ease-in-out, 0, opacity, .1s, ease-in-out, 0);

@mixin double-transition($property1, $duration1, $timing-function1, $delay1, $property2, $duration2, $timing-function2, $delay2) {
	-webkit-transition: $property1 $duration1 $timing-function1 $delay1, $property2 $duration2 $timing-function2 $delay2;
	-moz-transition: $property1 $duration1 $timing-function1 $delay1, $property2 $duration2 $timing-function2 $delay2;
	-o-transition: $property1 $duration1 $timing-function1 $delay1, $property2 $duration2 $timing-function2 $delay2;
	transition: $property1 $duration1 $timing-function1 $delay1, $property2 $duration2 $timing-function2 $delay2;
}