Motion adds life to UI and communicates information hierarchy intuitively. The key to animation prompts isn’t just describing how something moves — it’s also saying when, how long, and at what speed.
4 Core CSS Animation Types
Fade-in
Elements transition from transparent to opaque. The most versatile and unobtrusive entrance effect.
Add a simple fade-in animation to the hero section that transitions from opacity 0 to 1
over 800ms with an ease-in-out timing function.Slide-in
Elements move into position from off-screen. Ideal for sidebars and drawers.
Create a slide-in animation for the sidebar that enters from the left with
a transform: translateX(-100%) to translateX(0) transition.Blur Effect
Elements transition from blurred to sharp — a dramatic entrance.
Apply a blur-in effect to images where they start with filter: blur(10px)
and transition to filter: blur(0) when they enter the viewport.Staggered Animation
Multiple elements appear in sequence with slight time offsets. Effective for lists and feature showcases.
Create a staggered entrance for list items where each item appears
150ms after the previous one using incremental animation-delay values.Animation Timing Controls
The “feel” of an animation is determined by its timing properties.
| Property | Meaning | Example |
|---|---|---|
animation-duration | How long the animation takes | 500ms |
animation-delay | How long before it starts | 250ms |
animation-timing-function | Speed curve | ease-in-out |
Use negative delay to start an animation partway through its cycle:
Set animation-delay: -2s to start the animation 2 seconds into its cycle.Text Animation Techniques
Character Reveal
Characters appear one by one, creating a typing effect.
Create a character-by-character reveal animation for the main headline
using Inter font, with 50ms delay between each character.Word Fade Up
Words fade in while rising upward, one after another.
Create a staggered fade-up animation for each word in the tagline,
with 100ms delay between words.Letter by Letter
Each letter appears with a scale effect — dynamic and playful.
Create a letter-by-letter animation with a subtle scale effect
and 80ms staggered delay, using a bold display font.Gradient Text Animation
An animated gradient background clipped to the text.
Apply a moving gradient background from blue to purple to the main heading,
animating horizontally over 3 seconds in a loop.Clipped Reveal
Text reveals left-to-right through a clipping mask.
Create a text animation that reveals the title from left to right
using a clipping mask over 800ms with an ease-out timing function.JavaScript Animation Libraries
For more sophisticated effects, specify a JS library.
GSAP
Professional-grade animation. Handles complex sequences and physics.
Use GSAP to implement a staggered fade-in for the features list
as users scroll down the page.Vanta.js
Animated backgrounds with minimal configuration.
Use Vanta.js BIRDS effect as a subtle animated background
for the newsletter signup section.Three.js
3D scenes and models in the browser.
Create a landing page with a Three.js background featuring
a slow-rotating 3D model of the product.COBE.js
Lightweight library for interactive 3D globes.
Add a COBE.js globe to the "Global Presence" section
that highlights office locations with markers.Animation Best Practices
- Keep UI interaction animations under 500ms
- Animations should be subtle and purposeful — excess motion hurts UX
- Implement
prefers-reduced-motionto respect user accessibility settings
Disable all animations for users who have prefers-reduced-motion: reduce set.