Animations

Animations are reusable animation classes that you can use to emphasize an element. All of these animations will animate if you toggle their visibility using the "Toggle" button.

View in Storybook

Animation	Class	Description
Fade in	`.anim-fade-in`	Used to fade in an element on the page. This will run once when the element is revealed.
Fade out	`.anim-fade-out`	Used to fade out an element on the page. This will run once when the element is revealed.
Fade up	`.anim-fade-up`	Used to reveal an element on the page by sliding it up from below the fold. You should use this in a container with `overflow: hidden;` or on the bottom of the page.
Fade down	`.anim-fade-down`	Used to slide an element down hiding it. You should use this in a container with `overflow: hidden;` or on the bottom of the page.
Scale in	`.anim-scale-in`	Will scale the element in. This is useful on menus when you want them to appear more friendly.
Grow x	`.anim-grow-x`	Will grow an element width from 0-:100: real quick.
Pulse	`.anim-pulse`	Will pulse an element infinitely.
Hover	`.anim-hover-grow`	Will increase the scale of the element upon hover.
Rotate	`.anim-rotate`	Will rotate the element indefinitely around the coordinate specified by `transform-origin`. Most elements have a default of `transform-origin: 50% 50%` and will rotate around the center.