Animations provide additional context between states. They enhance things like loading content, process paths, microinteractions, etc.
Adding animations to an element is simple. Here is a small collection of predefined and reusable animations, useful for loading spinners, carousels, validation states, notices, etc.
Animations trigger on page load, but can be set to trigger on hover by appending
-hover to the class name. For example,
.bounce will trigger on page load, whereas
.bounce-hover will trigger on hover.
There are 5 different, t-shirt sized animation durations.
.a-duration-0 to reset duration to zero.
.a-duration can also be used as shorthand for
Easing defines the curve on which the animation takes place. Each of the 5 easing options provide a different feel to the animation.
There is no delay by default. Use
x is any number between 1 and 5.
By default, animations run only once. Animations can also be set to repeat once
.a-repeat-once, or repeat indefinitely