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+