As a developer or designer, if our development workflow includes the use of SASS, then the temptation is to use mixins such as this to construct our styles:
@mixin transition ($value...) {
@if length($value) >= 1 { // If we set value
@include prefixer($property: transition, $value: $value);
} @else { // If value is not set, return default value
@include prefixer($property: transition, $value: all 0.15s ease-in 0.05s);
}
}There's nothing wrong with this, but it will take effort to manage our mixins if we need to use more than just a small handful! The easier option is to explore using a pre-built animation library, as a way of reducing our development effort.
There are a number of developers who have created mixin libraries to handle animations; a perfect example is the SASS port of Animate, by Geoff Graham, which is available for download at https://github.com/geoffgraham/animate.scss.
There is something, though, that we have to be mindful of when working...