--- title: "CSS Accessibility - get a move on, then stop!" url: "https://www.bekk.christmas/post/2019/16/css-accessibility-get-a-move-on-then-stop!" authors: ["Hans-Christian Fjeldberg-Gustavson"] published: "2019-12-16" updated: "2024-11-07T13:05:28Z" language: "en-US" type: "article" tags: ["CSS"] --- # CSS Accessibility - get a move on, then stop! 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. ## In short Accessible animations need controls so users can pause, stop, or hide motion that they do not want, and flashing content must stay below the WCAG threshold. The article shows how CSS animations can be turned off or paused with properties like `animation-name: none` and `animation-play-state`, and notes that animations should also end after a duration or number of iterations. - **For:** Frontend developers using CSS animations - **Good to know beforehand:** Basic familiarity with CSS animations and transitions _AI-generated_ Unfortunately, some users may not like our animations, and WCAG specifically addresses animations with [Success Criterion 2.2.2 Pause, Stop, Hide](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html) and [Success Criterion 2.3.1 Three Flashes or Below Threshold](https://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html). 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 [three.js](https://threejs.org) like we do on [bekk.no](https://www.bekk.no), stopping the animation would involve creating one or more flags, and read these flags in the animation function. Changing the flags can easily be done using buttons and JavaScript, and currently that is the only thing missing on our site (PR coming in 2020 guaranteed). 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`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state%60%1C). Using this CSS property, the animation will pause at the current state when set to `paused`, and continue its animation when set to `running`: 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](https://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html#general-thresholddef). 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`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration) or a given number of iterations using [`animation-iteration-count`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count). Tomorrow, let’s take a look at how to automatically detect if we should limit our animations presented to our users.