CSS Animation Library

Responsible Animation Anchor (Responsible Animation)

Consider the impact that animation can have on people with disabilities. For some, animation can be a distraction; for others, it can cause discomfort or illness. In severe cases, it can pose serious danger, like triggering seizures in individuals with photosensitivity. By following these guidelines, we can ensure that our digital experiences are both enjoyable and safe for everyone!

1. Any web animation that loops must include a pause button. There are no exceptions here. In applications where this cannot be controlled, such as email, animation should be avoided.
2. Animations that occur once when interacting with a web page are exempt from having a pause button if they do not last for more than 5 seconds and are not excessive in their motion. However, developers should always exercise caution and honor user settings by including prefers-reduced-motion to help reduce or stop animation where needed. Please visit the Mozilla Developer Network for more details about this useful media query.
3. Animations that flash more than 3 times per second are not allowed on any websites or applications, as they may induce seizures. A pause button will be ineffective here. If you suspect that an animation may be a risk, please bring this to the attention of the Accessibility Team.