andyunleashed
5/15/2012 - 8:28 AM

Transitions Mixin for SASS / SCSS

Transitions Mixin for SASS / SCSS

@mixin transition($transition-property, $transition-time, $method) {
	-webkit-transition: $transition-property $transition-time $method;
	-moz-transition: $transition-property $transition-time $method;
	-ms-transition: $transition-property $transition-time $method;
	-o-transition: $transition-property $transition-time $method;
	transition: $transition-property $transition-time $method;
}
/* Usage - Stick into the top of your SCSS sheet and @include where needed for cross browser transitions. 

.class {
     @include transition($transition-property, $transition-time, $method);
}

$transition-property = the property you want to transition
$transition-time = seconds you want the transition to last
$method = how you want it to transition - e.g. ease-in-out

Usage example;

-------------

.item {
    @include transition(padding, 1s, ease-in-out);
}

-------------

*/