Great animations are invisible until they’re gone. When done right, they guide attention, provide feedback, and make interfaces feel responsive and alive. When done wrong, they distract, annoy, and tank performance. The difference often comes down to understanding a few core principles: timing functions, the properties you animate, and the psychology of motion. Let’s dig in.
Timing Functions and Easing
The linear timing function is almost never what you want. Real-world motion accelerates and decelerates; objects don’t move at constant speed. CSS gives us ease, ease-in, ease-out, and ease-in-out, but for finer control, the cubic-bezier function is your friend. A well-tuned curve can make the difference between an animation that feels snappy and one that feels sluggish — even when the duration is identical.
/* Snappy button feedback */
.button:active {
transform: scale(0.97);
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Smooth page transition */
.card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.3s ease;
}Performance: Animate the Right Properties
Not all CSS properties are created equal. transform and opacity are compositor-friendly — they run on the GPU and don’t trigger layout or paint. Animating width, height, top, or left, on the other hand, forces the browser to recalculate layout on every frame. For 60fps animations, stick to transform and opacity. Use will-change sparingly; it hints to the browser to optimize, but overuse can consume memory. Reserve it for elements you know will animate frequently.
Micro-interactions are where animations shine. A button that slightly shrinks on click, a checkbox that draws its checkmark with a stroke-dasharray animation, a card that lifts with a soft shadow on hover — these details don’t add much code, but they add a lot of polish. The key is restraint: one or two animated properties, a duration between 150–300ms for most interactions, and consistency across the interface. When every element follows the same timing and easing, the whole site feels cohesive.
The best animation work often goes unnoticed. Users might not consciously register that your modals slide in with a slight bounce or that your nav links underline from the center outward. But they’ll feel the difference. They’ll describe your site as “smooth” or “polished” without knowing why. That’s the art — making the interface feel human without drawing attention to the mechanics.