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>


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







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


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>