A 2 minute read written by
Animations can be what sets your website apart, and really makes your users happy. It shows that you have gone that extra mile to create something really special, often with great care, and oftentimes, depending on the animation, with great effort.
Unfortunately, some users may not like our animations, and WCAG specifically addresses animations with Success Criterion 2.2.2 Pause, Stop, Hide and Success Criterion 2.3.1 Three Flashes or Below Threshold. So, how do we comply?
Pause, stop and hide your animations
How to pause, stop and hide animations depends on what technique you are using.
If you are using CSS Animations and Transitions we can actually control animations in a few different ways. The first solution is to simply turn off animation with
animation-name: none;. The effect is immediate, and not very pretty:
A better solution, especially if you expect the users to continue the animation is to use
animation-play-state. Using this CSS property, the animation will pause at the current state when set to
paused, and continue its animation when set to
When using SVG animations, the same CSS property can be applied, but you might have to add the style and control the style within your SVG in stead of in your global CSS.
Three flashes or below threshold
When creating animations, they should not contain anything that flashes more than three times in any one second period, or otherwise break the very technical definition of the flash threshold.
Given that your animations adhere to this principle, it is generally considered good practice to stop the animations, either after a given duration using
animation-duration or a given number of iterations using
Tomorrow, let’s take a look at how to automatically detect if we should limit our animations presented to our users.