Accessible CSS transition pattern

Enhancing user interaction with subtle animations #

Well-implemented animations not only can make the UI more pleasant to look at, but have the potential for enhancing accessibility. Unless an individual has difficulty handling motion in general, transitions can reduce the cognitive load - making it easier to track elements on the page and relationship between them as they move.

The example below demonstrates how to add a subtle expanding transition transitions which could be used in an accordion pattern. This can be adjusted easily to fit almost any other design pattern.

.transition {
  transition-duration: 0.25s;
  transition-property: transform, opacity;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

&[aria-hidden="true"] {
  height: 0;
  opacity: 0;
  transform: translate3d(0, -0.5rem, 0);
  visibility: hidden;
}

&[aria-hidden="false"] {
  height: auto;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  visibility: visible;
}

See the Pen Accessible CSS transition pattern by Peter Makowski (@petermakowski-the-bashful) on CodePen.

We've found that animating just vertical position and opacity gives enough clarity and animating the height was not worth the cost (both in performance and additional complexity).

All animations should respect the CSS prefers-reduced-motion setting and therefore be disabled if that's the user's preference.

@media (prefers-reduced-motion: reduce) {
  .transition {
    transition: none;
  }
}