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.

Fade In

The .anim-fade-in class is used to fade in an element on the page. This will run once when the element is revealed.

Fade Out

The .anim-fade-out class is used to fade out an element on the page. This will run once when the element is revealed.

Fade Up

The .anim-fade-up class is 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

The .anim-fade-down class is 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

The .anim-scale-in class will scale the element in. This is useful on menus when you want them to appear more friendly.

Grow X

The .anim-grow-x class will grow an element width from 0-:100: real quick.

Pulse

The .anim-pulse class will pulse an element infinitely.

Hover animation

The .hover-grow class will increase the scale of the element upon hover.

Edit this page on GitHub
2 contributorssimuraicolebemis
Last edited by simurai on October 7, 2019