A tiny bit of motion makes an interface feel alive.
Direct answer
A CSS transition animates a property from one value to another. Set transition: property duration easing on the element, then change the property on hover or with a class. Animate transform and opacity for smooth results and honour prefers-reduced-motion.
Example
.button {
background: #3d5afe;
transform: translateY(0);
transition: transform 150ms ease, background 150ms ease;
}
.button:hover {
background: #2f46d1;
transform: translateY(-2px);
}
Respect reduced motion
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
Tips
- Keep durations short, around 100 to 300 ms.
- Use easing such as
ease-outfor entering elements. - Avoid transitions on everything with
transition: all.
Where Teyro fits
Teyro's HTML & CSS for Beginners course turns this into short lessons you can play in a few minutes a day. It has 100 lessons, and you can start free.
The bottom line
Small, quick, purposeful transitions improve the feel of a page.
