Animations

Make a page element stand out, use sparingly!

This work is powered by Animate.css although we pull out only the animations we want to reduce filesize. We also namespace the classes to avoid collisions with .cr-animated.

As per Animate.css you can add an .cr-animated--infinite class to the element you’re animating to have it perpetually execute that animation.

Usage guidelines

There are the following guidelines (open to discussion) around the use of animations:

1. Only one animation should be used on a single page (else it'll resemble something from the 1990s) to avoid Selective Attention
2. The animation should not clip into any other elements
3. Animation should be used to draw attention, the element should be effective at conveying its meaning
4. Typically animations should only be executed once (examples are set to infinite) unless you want to induce rage
5. Inject some fun into an otherwise simple or boring interaction (keeping in mind the above guidelines)

Slight amount of theory

Think of Microinteractions as a way to connect to the user to visually express change, a required action or to generally draw attention.

Available animations

Jiggle/shake

Play

<div class="cr-hu-alert cr-hu-alert--warning cr-hu-alert--dismissible cr-animated-jiggle" role="alert" id="anim-jiggle">
  <i class="cr-hu-alert__icon" aria-hidden="true"></i>
  <div class="cr-hu-alert__text">
    Seagull attacks are on the rise!
  </div>
  <button type="button" class="cr-hu-alert__dismiss" aria-label="Dismiss"></button>
</div>

Bounce

Play

<div class="cr-hu-alert cr-hu-alert--warning cr-hu-alert--dismissible cr-animated-bounce" role="alert" id="anim-bounce">
  <i class="cr-hu-alert__icon" aria-hidden="true"></i>
  <div class="cr-hu-alert__text">
    Seagull attacks are on the rise!
  </div>
  <button type="button" class="cr-hu-alert__dismiss" aria-label="Dismiss"></button>
</div>