Pure CSS Bezier Curve Motion Paths

Understanding Cubic Bezier Curves

Before diving into implementation, it's essential to understand what cubic Bezier curves are and why they're so powerful in web animation. A cubic Bezier curve is defined mathematically by four points: two endpoints (P0 and P3) that anchor the curve, and two control points (P1 and P2) that determine its shape. The curve never passes through the control points, but their positions influence how the line curves between the endpoints.

This mathematical elegance makes Bezier curves ideal for animation timing. When you write transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), you're defining how an animation progresses over time--not space. However, the same cubic Bezier function can be applied differently to create spatial motion along a curved path.

The key insight is that CSS animations typically move elements linearly by combining horizontal and vertical translations with identical timing. By applying different timing functions to each axis, we create the conditions for curved motion. Similar to how CSS functions like the minmax() function allow flexible layout calculations, cubic-bezier gives you precise control over animation progression.

The Mathematical Foundation

A 2D cubic Bezier curve follows this parametric equation, where t ranges from 0 to 1:

B(t) = (1-t)³P0 + 3(1-t)²tP1 + 3(1-t)t²P2 + t³P3

At t=0, the formula simplifies to P0 (the starting point). At t=1, it gives P3 (the endpoint). The control points P1 and P2 influence the curve's shape through their coefficients, creating smooth transitions that feel natural to the human eye.

Method 1: Time Warp

The Time Warp method leverages the fact that we can apply different animation timing functions to different CSS properties. By separating horizontal (X-axis) and vertical (Y-axis) movement into different animations, each with its own cubic-bezier timing function, we create a curved motion path.

How Time Warp Works

This approach uses two separate keyframe animations--one controlling horizontal position and another controlling vertical position. The magic happens in the animation-timing-function, where we specify unique cubic-bezier values for each axis:

.element {
 animation: moveX 2s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64),
 moveY 2s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
}

@keyframes moveX {
 50% { transform: translateX(100px); }
}

@keyframes moveY {
 50% { transform: translateY(-100px); }
}

The two cubic-bezier functions are carefully chosen so that when combined, the element follows a curved path. The timing functions essentially warp time differently for each axis, causing the element to traverse the X and Y dimensions at different rates throughout the animation.

Method 2: Competing Animations

The Competing Animations method takes a different approach by layering multiple animation objects on top of each other. Rather than splitting a single animation across properties, this technique uses nested elements or pseudo-elements to drive motion on separate axes.

The Nested Element Strategy

With this method, you place the element you want to animate inside a container element. The container handles animation along one axis, while the inner element handles the other axis. The key is using different timing functions for each animation layer:

.container {
 animation: moveX 2.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
}

.container::after {
 content: '';
 display: block;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 animation: moveY 2.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
}

@keyframes moveX {
 50% { transform: translateX(100px); }
}

@keyframes moveY {
 50% { transform: translateY(-100px); }
}

The pseudo-element approach is particularly elegant because it doesn't require additional HTML markup--the browser generates the pseudo-element automatically, keeping your markup clean.

Performance Optimization

Creating smooth curved animations requires attention to performance. CSS animations that use transform and opacity are GPU-accelerated, meaning they don't trigger expensive layout recalculations.

Using Hardware-Accelerated Properties

Always animate using transform (translateX, translateY) rather than properties like left, top, or margin. Transform changes are handled entirely by the GPU compositing layer, while property changes trigger layout recalculations on the CPU:

/* Good - GPU accelerated */
.element {
 transform: translateX(100px) translateY(-50px);
}

/* Bad - Triggers layout recalculation */
.element {
 left: 100px;
 top: 50px;
}

Following performance best practices like GPU-accelerated animations and proper property selection helps maintain low CSS specificity and keeps your stylesheets maintainable.

Will-Change for Complex Animations

For particularly complex or long-running animations, adding will-change: transform hints to the browser:

.element {
 will-change: transform;
}

However, use this sparingly--creating too many composition layers can hurt performance by consuming excessive GPU memory.

Browser Compatibility

Understanding browser support is crucial when implementing curved motion paths.

Core Animation Support

CSS animations and transitions are supported across all modern browsers:

• Chrome 43+ (2015)
• Firefox 49+ (2016)
• Safari 13.1+ (2020)
• Edge 79+ (2020)

Method-Specific Support

Methods 1 & 2 work in all browsers that support CSS animations.

Method 3 requires @property support (Chrome 78+, Safari 16.4+, Firefox 128+, Edge 79+).

Practical Applications

Curved motion paths excel in several common scenarios:

• Loading Animations: Curved paths create more interesting indicators than linear motion
• Interactive Hover Effects: Arc movements feel more natural than straight lines--similar to how various CSS display values can hide or show elements for interactive states
• Decorative Animations: Hero sections benefit from organic motion
• Micro-interactions: Guide user attention with elegant curved movements

Sources

1. CSS-Tricks: Pure CSS Bezier Curve Motion Paths
2. Tobias Ahlin: Moving along a curved path in CSS with layered animation
3. MDN Web Docs: cubic-bezier()