Animations (like gifs) can be accessible if:
- they are set to stop after 5 seconds or
- if users are presented with a way to pause it
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.
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.
Detecting with JS