---
title: "CSS UI Feedback Animations: Toasts, Modals & Tooltips"
description: "Six free CSS UI feedback animations with previews: toast slide-in, modal pop-in, tooltip fade, tab underline slide, and progress pings. Pure CSS."
url: https://frontendhelpers.com/css-ui-feedback-animations
updated: 2026-10-12
---
# CSS UI feedback animations
Toasts, modals, tooltips, tab indicators, progress bars and notification pings — the motion that tells users what just happened.
## The code for all 6 ui feedback, explained
Every effect above, with the markup to use and the complete CSS. Each one is self-contained: paste the CSS once, add the class, done.
### Toast Slide-In
The standard confirmation pattern — slides in with a slight overshoot so it feels placed, not teleported. Remove the element (or add a fade-out class) after ~2.5s.
Markup
```html
✓ Changes saved
```
CSS
```css
.fh-toast {
display: inline-block;
padding: 12px 20px;
background: #101828;
border: 1px solid rgba(16, 185, 129, 0.5);
border-radius: 10px;
color: #10b981;
font-weight: 600;
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
animation: fh-toastIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes fh-toastIn {
from { opacity: 0; transform: translateY(16px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
```
### Modal Pop-In
Dialog scales up as the backdrop fades — the pair reads as one motion. In production use the native
element and trigger this on open.
Markup
```html
```
CSS
```css
.fh-tip-wrap {
position: relative;
display: inline-block;
}
.fh-tooltip {
position: absolute;
bottom: calc(100% + 9px);
left: 50%;
translate: -50% 4px;
background: #101828;
border: 1px solid #3a4358;
border-radius: 8px;
padding: 7px 12px;
font-size: 0.75em;
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.25s ease 0.15s, translate 0.25s ease 0.15s, visibility 0.25s 0.15s;
}
.fh-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
margin-top: -5px;
width: 10px;
height: 10px;
background: #101828;
border-right: 1px solid #3a4358;
border-bottom: 1px solid #3a4358;
transform: rotate(45deg);
}
.fh-tip-wrap:hover .fh-tooltip,
.fh-tip-wrap:focus-within .fh-tooltip {
opacity: 1;
visibility: visible;
translate: -50% 0;
}
```
### Tab Underline Slide
Each tab carries its own scaling underline — hover any tab and the line grows from centre. Swap the .active class in JS for the selected state.
Markup
```html
```
CSS
```css
.fh-tabs {
display: flex;
gap: 4px;
}
.fh-tab {
position: relative;
padding: 10px 16px;
font-weight: 600;
color: #94a3b8;
cursor: pointer;
transition: color 0.2s ease;
}
.fh-tab::after {
content: '';
position: absolute;
left: 12px;
right: 12px;
bottom: 4px;
height: 2px;
border-radius: 2px;
background: #06b6d4;
transform: scaleX(0);
transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.fh-tab:hover,
.fh-tab.active { color: inherit; }
.fh-tab:hover::after,
.fh-tab.active::after { transform: scaleX(1); }
```
### Progress Bar Fill
The fill animates to a CSS variable, so JavaScript only sets --target and the easing is pure CSS. Great for onboarding steps and upload progress.
Markup
```html
```
CSS
```css
.fh-progress {
width: 170px;
height: 10px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.fh-progress-fill {
--target: 72%;
height: 100%;
width: var(--target);
border-radius: 5px;
background: linear-gradient(90deg, #8b5cf6, #06b6d4);
animation: fh-progressFill 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes fh-progressFill {
from { width: 0; }
}
```
### Notification Ping
The unread-notification dot with a radiating ping — impossible to miss without being loud. The ::after ring animates; the dot itself stays still.
Markup
```html
```
CSS
```css
.fh-bell {
position: relative;
display: inline-grid;
place-content: center;
width: 46px;
height: 46px;
border: 1px solid #3a4358;
border-radius: 12px;
}
.fh-badge-ping {
position: absolute;
top: 9px;
right: 9px;
width: 9px;
height: 9px;
border-radius: 50%;
background: #ef4444;
}
.fh-badge-ping::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: #ef4444;
animation: fh-badgePing 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes fh-badgePing {
from { transform: scale(1); opacity: 0.8; }
to { transform: scale(2.6); opacity: 0; }
}
```
## 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 `