Utilities » Mixins AnimationLink
Since: 1.0.0 New IssueA mixin for animation. Takes care of browser
prefixes for you. You should always use this mixin
when writing animation rules to ensure you're
compatible with the browsers we support.
Use with keyframes
to build complex animations
that transition
isn't capable of alone and to tightly
control timing.
Accepts any valid CSS value for animation
, including
multiple animation declarations.
More info at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/animation
Examples
Create an infinite loading animation which completes every 250ms using keyframes and animation.
@include keyframes( infinite-loader ) {
from {
transform: rotate( 0deg );
}
to {
transform: rotate( 360deg );
}
}
.loading {
@include animation( infinite-loader 250ms infinite );
}
_mixins.scss, line 651
View Source