Skip to content

Instantly share code, notes, and snippets.

@C1tas
Created June 6, 2017 06:55
Show Gist options
  • Save C1tas/d0e5f35fd29e18490c4e7ddaa2571636 to your computer and use it in GitHub Desktop.
Save C1tas/d0e5f35fd29e18490c4e7ddaa2571636 to your computer and use it in GitHub Desktop.
SASS:Transition Mixin
@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);
}
-------------
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment