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.














	<!-- 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.














	<!-- 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>



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.







	<!-- 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 defines the curve on which the animation takes place. Each of the 5 easing options provide a different feel to the animation.






	<!-- 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>


There is no delay by default. Use .a-delay-x, where x is any number between 1 and 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>


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



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

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