Easing Functions in CSS: A Complete Guide to Smooth Animations

Easing functions are the secret ingredient that transforms mechanical, robotic motion into smooth, natural transitions that feel intuitive to users. When you hover over a button that gently accelerates into view or a modal that decelerates to a soft landing, you're experiencing the power of easing at work.

This guide covers everything you need to master easing functions in CSS, from basic built-in keywords to advanced custom curves that create spring-like physics without JavaScript. Master these techniques as part of a comprehensive web development strategy to create interfaces that feel polished and professional.

What Are Easing Functions?

Easing functions define the rate of change of a value over time during an animation or transition. They control how an element moves between states, creating natural motion instead of linear (robotic) movement.

The Physics Behind Easing

Objects in the real world don't move at constant speeds--they accelerate, decelerate, and respond to forces like gravity and friction. A ball dropped from a height starts slow, accelerates due to gravity, then bounces and decelerates. Easing functions replicate these natural motion patterns, making digital interfaces feel more intuitive.

Built-in Easing Keywords

CSS provides five built-in easing keywords that cover most common use cases. Understanding when to use each is essential for creating polished interfaces.

Custom Easing with cubic-bezier()

The cubic-bezier() function is your primary tool for creating custom easing curves. Unlike keywords, it gives you complete control over the acceleration curve.

Understanding the Syntax

cubic-bezier(x1, y1, x2, y2) defines a custom curve using two control points:

• P1 (x1, y1): First control point
• P2 (x2, y2): Second control point
• X values must be 0-1 (time cannot go backward)
• Y values can exceed 0-1 for bounce effects

Recommended Presets

Step Functions for Discrete Animations

The steps() function creates frame-by-frame or sprite-sheet animations by dividing the transition into discrete jumps instead of smooth motion.

Step Direction Modifiers

Use cases: retro animations, loading indicators, progress meters, countdown timers.

The Modern linear() Function

The linear() function creates complex easing curves using linear segments. Unlike the linear keyword (constant speed), it can create variable speed motion with precise control.

When to Use linear() vs cubic-bezier()

• Use cubic-bezier() for most custom easing--intuitive and well-supported
• Use linear() for complex multi-segment curves that cubic-bezier cannot achieve
• linear() is ideal for replicating spring physics and bounce effects with exact control
• Consider browser support--linear() is newer and may need fallbacks

For most web development projects, cubic-bezier() provides the best balance of flexibility and browser compatibility.

Applying Easing to CSS Properties

Easing functions work with both transitions and animations through specific properties.

transition-timing-function

Controls easing for CSS transitions when properties change state.

animation-timing-function

Controls easing for keyframe animations, either globally or per-keyframe.

Performance Best Practices

Optimize your animations for smooth 60fps performance with these techniques.

GPU Acceleration

Animate only transform and opacity properties for best performance (GPU-accelerated). These properties don't trigger layout recalculations.

Best Practices

• Animate only transform and opacity for 60fps
• Avoid animating width, height, margin, padding
• Use will-change sparingly to hint browser optimization
• Test on actual devices, not just development tools

Proper animation performance is a key aspect of professional web development that ensures smooth user experiences across all devices.

Accessibility: Respecting Reduced Motion

Many users experience motion sensitivity (vestibular disorders). Respect their preferences by providing alternative animations.

Using prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
 .animated-element {
 transition: transform 0.1s ease;
 }
}

Key Considerations

• Never disable all motion without user consent
• Provide subtle or minimal animation for reduced motion preferences
• Ensure information is not conveyed through motion alone
• Test with motion disabled to verify functionality

Practical Code Examples

Real-world patterns you can use in your projects.

Button Hover Effects

.btn-primary {
 position: relative;
 transform: translateY(0);
 transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
 box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.btn-primary:active {
 transform: translateY(0);
 transition: transform 0.1s ease;
}

Modal Animations

.modal-content {
 opacity: 0;
 transform: scale(0.95) translateY(10px);
 transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
 transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-content.active {
 opacity: 1;
 transform: scale(1) translateY(0);
}

Staggered List Animations

.list-item {
 opacity: 0;
 transform: translateY(20px);
 transition: opacity 0.4s ease-out,
 transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.list-item.visible {
 opacity: 1;
 transform: translateY(0);
}

/* Stagger delays */
.list-item:nth-child(1) { transition-delay: 0ms; }
.list-item:nth-child(2) { transition-delay: 50ms; }
.list-item:nth-child(3) { transition-delay: 100ms; }

Quick Reference: Choosing the Right Easing

Sources

1. MDN Web Docs: CSS Easing Functions
2. SVGator: Easing Functions Explained
3. CSS-Tricks: Advanced CSS Animation Using cubic-bezier()
4. Josh W. Comeau: Springs and Bounces in Native CSS
5. Easings.net