Implementation

Animations and motion should be used sparingly and only to enhance understanding, not for decoration.

Lengthy or repeating animations (like gifs) can be accessible if:

  • it automatically stops after 5 seconds or
  • if users are presented with an intuitive way to pause it

Safety

Allow animations to be disabled with CSS

People with vestibular disorders can be made ill by sweeping animations on screen.

It is important to change or disable animations when device reduce motion settings are activated.

This can be accomplished via CSS media query.

@keyframes bounce {
  0% { transform: scale(1); }
  25% { transform: scale(.9); }
  50% { transform: scale(1); }
  75% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes dissolve {
  0% { background-color: green; }
  50% { background-color: darkgreen; }
  100% { background-color: green; }
}

.animation {
  background-color: green;
  animation: bounce 2s linear infinite both;
}

@media (prefers-reduced-motion) {
  .animation {
    animation-name: dissolve;
  }
}
<div class="animation">Animated element</div>

Bouncy box

If your device is set to reduce motion, the animation will softly fade from one color to the next instead of bounce; otherwise it will bounce.

Animated element

Detecting with JS

const pref = 
  window.matchMedia(
    '(prefers-reduced-motion: reduce)'
  );

Related animation & motion entries