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

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

  

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

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

  

Duration

There are 5 different, t-shirt sized animation durations. .a-duration-xs, .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-xs

.a-duration-s

.a-duration-m

.a-duration-l

.a-duration-xl

.a-duration-0

  <!-- Animation duration: xs -->
  <div class="spin-right a-duration-xs"></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>
  

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>