The problem with the fancy animations in your website and how to fix it

About

You are a developer. You want to build a website to show off your skills. What better way to impress visitors or potential employers or clients than having the elements of the page jump around in the screen? It gives your website the “wow” factor! This is great but there is a problem with it, and it has to do with accessibility.

Overview of our animated page

Before we begin, let's create a simple page with a box in the middle that does dancing around the screen, using CSS and Keyframes. Nothing fancy:

The box goes left while it rotates 30 degrees anticlockwise

The box goes right while it rotates 30 degrees clockwise

Returns to its initial position

Repeat.

Notice: The demo linked below contains motion that is not turned off by turning off animations in your settings

The problem

The problem with fancy animations on a website have to do with accessibility. Specifically, visitors with Vestibular Motion Disorder or Vestibular Balance Disorder might find this problematic. Being exposed to these kinds of animations might trigger discomfort such as:

Dizziness

Feeling off-balance

Disorientation

The solution

All major browsers and operating systems now have a setting where a user can reduce the amount of motion and animation. CSS has a media query called prefers-reduced-motion which you can use to detect whether a visitor has this setting turned on.

Updating our code

Let's have a look at our CSS code for the animated box:

#app #box{
  padding: 30px;
  font-size: 30px;
  border: 9px solid #32E0C4;
  font-family: sans-serif;
  color: #eee;
  margin: auto;
  background-color: #393E46;
  border-radius: 15px;
  animation-name: bounce;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes bounce {
  25% {
    transform: rotate(30deg) translateX(120px);
  }

  50% {
    transform: rotate(-30deg) translateX(-120px);
  }

  to {
    transform: rotate(0deg)  translateX(0px);
  }
}

The code above sets the styling of the box, how it should be animated from the @keyframes block below it.

To make sure this animation does not work when the user has chosen to have reduced motion we can do as follows:

Step 1: Remove the last 3 lines from the CSS code of the box, which are animation-related:

-  animation-name: bounce;
-  animation-duration: 3s;
-  animation-iteration-count: infinite;
}

Step 2: Create a block using prefers-reduced-motion: no-preference

This block should contain the 3 lines we deleted previously:

@media (prefers-reduced-motion: no-preference){
  #app #box{
    animation-name: bounce;
    animation-duration: 3s;
    animation-iteration-count: infinite;
  }
}

This will ensure that:

The animation is only activated if the visitor has not selected to have reduced motion

The animation is not activated if the browser or operating system do not support prefers-reduced-motion.

Notice: if you prefer to not show animation in the demo linked below, please turn off animations in your system's settings.

And that's it! Your animation can be cancelled from your visitor's operating system settings at will! To test the demo above, simply change your settings in your operating system to turn off animations!