← All elements
<div class="ts"><b>✓</b><span>Changes saved</span></div>About this layout
A notification that slides in, waits, then slides away on its own, all from one keyframe animation.
How it works
The notification is animated by a single keyframe over five seconds. It starts below its resting position and transparent, slides up to rest and stays for most of the cycle, then slides down and fades out again. Because the whole sequence is in CSS, the toast needs no timer or script.
Ways to customise it
- Change the message text and the tick background.
- Adjust the percentages to keep the toast visible longer.
- Remove infinite and add forwards to show it once.
Good to know
A real toast should be announced to screen readers with role status or aria-live, which this static demo does not do. Disappearing messages are hard to read, so keep them visible long enough.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.