Animations

Animations provide additional context between states. They enhance things like loading content, process paths, microinteractions, etc.


Basic Usage

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.

.spin-right

.spin-left

.bounce

.shake

.fade-in

.fade-out

.slide-in

.slide-out

.slide-up

.slide-right

.slide-down

.slide-left

.zoom-in

	<!-- Animation: spin right -->
	<div class="spin-right"></div>

	<!-- Animation: spin left -->
	<div class="spin-left"></div>

	<!-- Animation: bounce -->
	<div class="bounce"></div>

	<!-- Animation: shake -->
	<div class="shake"></div>

	<!-- Animation: fade-in -->
	<div class="fade-in"></div>

	<!-- Animation: fade-out -->
	<div class="fade-out"></div>

	<!-- Animation: slide-in -->
	<div class="slide-in"></div>

	<!-- Animation: slide-out -->
	<div class="slide-out"></div>

	<!-- Animation: slide-up -->
	<div class="slide-up"></div>

	<!-- Animation: slide-right -->
	<div class="slide-right"></div>

	<!-- Animation: slide-down -->
	<div class="slide-down"></div>

	<!-- Animation: slide-left -->
	<div class="slide-left"></div>

	<!-- Animation: zoom-in -->
	<div class="zoom-in"></div>

	

Hover Animations

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.

.spin-right-hover

.spin-left-hover

.bounce-hover

.shake-hover

.fade-in-hover

.fade-out-hover

.slide-in-hover

.slide-out-hover

.slide-up-hover

.slide-right-hover

.slide-down-hover

.slide-left-hover

.zoom-in-hover

	<!-- Hover animation: spin right -->
	<div class="spin-right-hover"></div>

	<!-- Hover animation: spin left -->
	<div class="spin-left-hover"></div>

	<!-- Hover animation: bounce -->
	<div class="bounce-hover"></div>

	<!-- Hover animation: shake -->
	<div class="shake-hover"></div>

	<!-- Hover animation: fade-in -->
	<div class="fade-in-hover"></div>

	<!-- Hover animation: fade-out -->
	<div class="fade-out-hover"></div>

	<!-- Hover animation: slide-in -->
	<div class="slide-in-hover"></div>

	<!-- Hover animation: slide-out -->
	<div class="slide-out-hover"></div>

	<!-- Hover animation: slide-up -->
	<div class="slide-up-hover"></div>

	<!-- Hover animation: slide-right -->
	<div class="slide-right-hover"></div>

	<!-- Hover animation: slide-down -->
	<div class="slide-down-hover"></div>

	<!-- Hover animation: slide-left -->
	<div class="slide-left-hover"></div>

	<!-- Hover animation: zoom-in -->
	<div class="zoom-in-hover"></div>

	

Duration

There are 5 different, t-shirt sized animation durations. .a-duration-1, .a-duration-s, .a-duration-m, .a-duration-l, and .a-duration-xl.

Use .a-duration-0 to reset duration to zero.

.a-duration can also be used as shorthand for .a-duration-m.

.a-duration-1

.a-duration-s

.a-duration-m

.a-duration-l

.a-duration-xl

.a-duration-0

	<!-- Animation duration: xs -->
	<div class="spin-right a-duration-1"></div>

	<!-- Animation duration: s -->
	<div class="spin-right a-duration-s"></div>

	<!-- Animation duration: m -->
	<div class="spin-right a-duration-m"></div>

	<!-- Animation duration: l -->
	<div class="spin-right a-duration-l"></div>

	<!-- Animation duration: xl -->
	<div class="spin-right a-duration-xl"></div>

	<!-- No animation duration -->
	<div class="spin-right a-duration-0"></div>
	

Easing

Easing defines the curve on which the animation takes place. Each of the 5 easing options provide a different feel to the animation.

.a-easing-linear

.a-easing-ease

.a-easing-cb-scale-up

.a-easing-cb-scale-in

.a-easing-cb-scale-out

	<!-- Animation easing: linear -->
	<div class="spin-right a-easing-linear"></div>

	<!-- Animation easing: ease -->
	<div class="spin-right a-easing-ease"></div>

	<!-- Animation easing: cubic bezier scale-up -->
	<div class="spin-right a-easing-cb-scale-up"></div>

	<!-- Animation easing: cubic bezier scale-in -->
	<div class="spin-right a-easing-cb-scale-in"></div>

	<!-- Animation easing: cubic bezier scale-out -->
	<div class="spin-right a-easing-cb-scale-out"></div>
	

Delay

There is no delay by default. Use .a-delay-x, where x is any number between 1 and 5.

.a-delay-1

.a-delay-2

.a-delay-3

.a-delay-4

.a-delay-5

	<!-- Animation delay 1 -->
	<div class="spin-right a-delay-1"></div>

	<!-- Animation delay 2 -->
	<div class="spin-right a-delay-2"></div>

	<!-- Animation delay 3 -->
	<div class="spin-right a-delay-3"></div>

	<!-- Animation delay 4 -->
	<div class="spin-right a-delay-4"></div>

	<!-- Animation delay 5 -->
	<div class="spin-right a-delay-5"></div>
	

Repeat

By default, animations run only once. Animations can also be set to repeat once .a-repeat-once, or repeat indefinitely .a-repeat.

.a-repeat-once

.a-repeat

	<!-- Animation repeat once -->
	<div class="spin-right a-repeat-once"></div>

	<!-- Animation repeat indefinitely -->
	<div class="spin-right a-repeat"></div>