Feedback animation has a job to do
Every animation in this category answers a question: did that work? where did this come from? how much longer? That makes them the most functional animations on the site — and the ones where getting the timing right matters most.
Confirmation feedback should appear immediately after the action, within about 100ms, or the user stops associating the two. A toast that arrives half a second after clicking Save feels disconnected from the click.
Toasts, and announcing them properly
A toast that only appears visually is invisible to screen reader users — who then have no confirmation their action succeeded. Put toast messages in a container with aria-live="polite" so assistive technology announces them without interrupting, exactly as this site does for its copy confirmations.
Keep them on screen long enough to read — roughly 4 to 6 seconds for a short message — and never put an essential action inside a toast that disappears. Anything the user must act on belongs in a persistent element.
Modals: the hardest pattern to get right
The pop-in animation is the easy part. The accessibility requirements are what most implementations miss: focus must move into the dialog when it opens, be trapped inside while it's open, and return to the triggering element on close. Escape must dismiss it, and content behind it should be inert.
The native <dialog> element with showModal() handles focus trapping, Escape and inertness for you, and is now well supported. Use it and apply this animation on open rather than rebuilding all of that from scratch.
Progress and tooltips
The progress bar animates to a CSS custom property, so JavaScript only sets --target and the easing stays in CSS. For accessibility, use a real role="progressbar" with aria-valuenow so the value is exposed, not just drawn.
Tooltips use a deliberate short delay before appearing — without it they flicker distractingly as the cursor crosses the page. Never put essential information in a tooltip alone: it's unreachable on touch devices and easy to miss.