animate

10up Animate is a small utility animation library. It consists of a series of CSS classes that can be combined or used in isolation to bring small elements of motion into a UI.

Adding small touches of motion to a UI can create a nice level of polish and gently enhance the user’s experience. 10up’s animation library supports the prefers-reduced-motion media feature for users who prefer to turn off or reduce the amount of UI motion as a part of our commitment to creating accessible interfaces.

Examples

Usage

<div class="fade-in duration-500 timing-linear delay-500">
  Animate me!
</div>

						
@import url("@10up/animate");

						
/*
  Using the animation names from the library you can create
  custom combinations like a fade in, slide up
*/
.custom-chained-animation {
  animation-name: fadeIn, slideInUp;
}
						

					

Documentation

Installation

The standard import from the NPM package will bring in all the animations. If you want to choose the animations to bring in you can do so manually by referencing the CSS files directly.

npm install @10up/animate --save

Available Animation Options

This is a full list of options currently available.

Fade

List of Fade options
Class	Animation Name	Description
`.fade-in`	`fadeIn`	Update opacity from 0 to 1
`.fade-out`	`fadeOut`	Update opacity from 1 to 0

Rotate

List of Rotate options
Class	Animation Name	Description
`.rotate-90`	`rotate90`	Rotate to 90 degrees
`.rotate-180`	`rotate180`	Rotate to 180 degrees
`.rotate-270`	`rotate270`	Rotate to 270 degrees
`.rotate-360`	`rotate360`	Rotate to 360 degrees

Scale (Zoom)

List of Scale (Zoom) options
Class	Animation Name	Description
`.scale-down`	`scaleDown`	Scale from 1 to 0.75
`.scale-down-large`	`scaleDownLarge`	Scale from 1 to 0.5
`.scale-down-small`	`scaleDownSmall`	Scale from 1 to 0.9
`.scale-up`	`scaleUp`	Scale from 1 to 1.25
`.scale-up-large`	`scaleUpLarge`	Scale from 1 to 1.5
`.scale-up-small`	`scaleUpSmall`	Scale from 1 to 1.1

Shake

List of Shake options
Class	Animation Name	Description
`.shake-horizontal`	`shakeHorizontal`	Right-to-left movement, 10px
`.shake-horizontal-large`	`shakeHorizontalLarge`	Right-to-left movement, 15px
`.shake-horizontal-small`	`shakeHorizontalSmall`	Right-to-left movement, 5px
`.shake-vertical`	`shakeVertical`	Up-to-down movement, 10px
`.shake-vertical-large`	`shakeVerticalLarge`	Up-to-down movement, 15px
`.shake-vertical-small`	`shakeVerticalSmall`	Up-to-down movement, 5px

Slide

List of Slide options
Class	Animation Name	Description
`.slide-in-down`	`slideInDown`	Move object from 100% down to 0%
`.slide-in-left`	`slideInLeft`	Move object from 100% left to 0%
`.slide-in-right`	`slideInRight`	Move object from 100% right 0%
`.slide-in-up`	`slideInUp`	Move object from 100% up 0%
`.slide-out-down`	`slideOutDown`	Move object from 0% to down 100%
`.slide-out-left`	`slideOutLeft`	Move object from 0% to left 100%
`.slide-out-right`	`slideOutRight`	Move object from 0% to right 100%
`.slide-out-up`	`slideOutUp`	Move object from 0% to up 100%

Delay

List of Delay options
Name	Description
`.delay-150`	Set animation delay to 150ms
`.delay-200`	Set animation delay to 200ms
`.delay-250`	Set animation delay to 250ms
`.delay-300`	Set animation delay to 300ms
`.delay-350`	Set animation delay to 350ms
`.delay-400`	Set animation delay to 400ms
`.delay-450`	Set animation delay to 450ms
`.delay-500`	Set animation delay to 500ms
`.delay-550`	Set animation delay to 550ms
`.delay-600`	Set animation delay to 600ms
`.delay-650`	Set animation delay to 650ms
`.delay-700`	Set animation delay to 700ms
`.delay-750`	Set animation delay to 750ms
`.delay-800`	Set animation delay to 800ms
`.delay-850`	Set animation delay to 850ms
`.delay-900`	Set animation delay to 900ms
`.delay-950`	Set animation delay to 950ms
`.delay-1000`	Set animation delay to 1000ms

Duration

List of Duration options
Name	Description
`.duration-150`	Set animation duration to 150ms
`.duration-200`	Set animation duration to 200ms
`.duration-250`	Set animation duration to 250ms
`.duration-300`	Set animation duration to 300ms
`.duration-350`	Set animation duration to 350ms
`.duration-400`	Set animation duration to 400ms
`.duration-450`	Set animation duration to 450ms
`.duration-500`	Set animation duration to 500ms
`.duration-550`	Set animation duration to 550ms
`.duration-600`	Set animation duration to 600ms
`.duration-650`	Set animation duration to 650ms
`.duration-700`	Set animation duration to 700ms
`.duration-750`	Set animation duration to 750ms
`.duration-800`	Set animation duration to 800ms
`.duration-850`	Set animation duration to 850ms
`.duration-900`	Set animation duration to 900ms
`.duration-950`	Set animation duration to 950ms
`.duration-1000`	Set animation duration to 1000ms

Timing

List of Timing options
Name	Description
`.timing-ease-in-out`	Slow starting and a slow ending speed
`.timing-ease-in`	Slow starting speed
`.timing-ease-out`	Slow ending speed
`.timing-ease`	Slow start, then fast, before it ends slowly
`.timing-linear`	Consistent speed from start to end

Browser Compatibility

List of Browser Support for this component
Chrome	Latest
Firefox	Latest
Edge	Latest
Safari	Latest
IE	10+