5 Common CSS Animation Effects and When to Use Each

Each of these effects communicates something slightly different to a user — picking the right one matters as much as executing it well.

Fade

A smooth opacity transition from invisible to visible (or vice versa). Fade is the least attention-grabbing of these effects, which makes it well-suited for content appearing on page load or scroll — it signals "here's new content" without demanding immediate attention the way a bounce or shake would.

Bounce

A springy, elastic movement that overshoots and settles. Bounce draws the eye and conveys energy or playfulness — a good fit for a call-to-action button or a notification icon, but likely too energetic for something like a page's main heading, where it would feel distracting rather than inviting.

Pulse

A repeating scale or opacity oscillation, subtly growing and shrinking. Pulse is commonly used to draw attention to something waiting for user action — a "new" badge, a button that needs clicking — without being as aggressive as a full bounce.

Rotate

Continuous or triggered rotation. Rotate is the standard pattern for loading spinners, and works well for icons that benefit from a sense of motion or process (a settings gear, a refresh icon) — less appropriate for text or content blocks, where spinning would just look broken.

Shake

A rapid, small side-to-side (or up-down) movement. Shake reads as an error or warning signal almost universally — commonly used on invalid form fields or failed actions, since the motion itself communicates "something's wrong" before a user even reads any accompanying text.

Choosing Based on What You're Communicating

The right animation isn't just about what looks good in isolation — it's about matching the motion's implicit meaning to the message you actually want to send. A shake on a successful form submission would feel wrong even if smoothly executed, because shake already carries an "error" association for most users.