Pure CSS Bezier Curve Motion Paths

This method works well for most use cases, but it has a notable limitation: it fails when both endpoints share the same horizontal or vertical line due to division by zero (a tiny offset fixes this). It also only works for cubic curves, and the timing options are restricted. The examples use 1/3 and 2/3 for the control point parameters to achieve linear timing; you can alter them, but the flexibility pales compared to the other methods.

Method 2: Competing Animations

A second technique emerges from an interesting quirk of CSS animations. If an element is animated with multiple @keyframes rules, they don't necessarily override each other when they don't share a from frame:

div {
  animation-name: move1, move2;
}

@keyframes move1 {
  to {
    left: 256px;
  }
}

@keyframes move2 {
  to {
    top: 256px;
  }
}

@keyframes move1 {
  to {
    transform: translateX(256px);
  }
}

@keyframes move2 {
  to {
    transform: translateY(256px);
  }
}

Here, move2 lacks a from frame, so the starting position is animated by move1. The resulting path is not a straight line — it's a quadratic Bézier curve, because the element's position is a weighted average of two simultaneously linearly-moving points.

The demo visualizes this construction: the blue dot shows the intermediate position that the second animation starts from, while the black dot represents the element itself. To create a quadratic Bézier curve between points p0, p1, and p2, you can define the animations like this:

/* pseudo-CSS code */
div {
  animation-name: move1, move2;
}

@keyframes move1 {
  from {
    transform: translate3d(p0.x, p0.y, p0.z);
  }
  /* define q1 = (2 * p1 - p2) */
  to {
    transform: translate3d(q1.x, q1.y, q1.z);
  }
}

@keyframes move2 {
  to {
    transform: translate3d(p2.x, p2.y, p2.z);
  }
}

The concept extends naturally to cubic curves (with points p0, p1, p2, p3) by chaining three animations:

/* pseudo-CSS code */
div {
  animation-name: move1, move2, move3;
}

@keyframes move1 {
  from {
    transform: translate3d(p0.x, p0.y, p0.z);
  }
  /* define q1 = (3 * p1 - 3 * p2 + p3) */
  to {
    transform: translate3d(q1.x, q1.y, q1.z);
  }
}

@keyframes move2 {
  /* define q2 = (3 * p2 - 2 * p3) */
  to {
    transform: translate3d(q2.x, q2.y, q2.z);
  }
}

@keyframes move3 {
  to {
    transform: translate3d(p3.x, p3.y, p3.z);
  }
}

This method also handles 3D curves without extra work — the previous examples already worked in three dimensions if you supply the z values. Higher-order Bézier curves would likely follow the same recursive pattern, though no generic formula is presented here.

Method 3: Direct Construction

The recursive definition of a Bézier curve provides a third path. For a curve defined by points p0 through p3, intermediate points are constructed by linear interpolation between the original points:

@keyframes green0 {
  from {
    --green0x: var(--p0x);
    --green0y: var(--p0y);
  }
  to {
    --green0x: var(--p1x);
    --green0y: var(--p1y);
  }
}

@keyframes blue0 {
  from {
    --blue0x: var(--green0x);
    --blue0y: var(--green0y);
  }
  to {
    --blue0x: var(--green1x);
    --blue0y: var(--green1y);
  }
}

By creating CSS variables for each interpolated point and updating them with keyframes that use @property to register the custom properties as colors or lengths, you can animate the entire construction. Nested elements then trace out the final Bézier curve based on those variable values.

This approach mirrors the standard math construction, making it the most intuitive for those comfortable with the geometry. It also handles 3D curves and higher-order curves with straightforward extensions. However, @property is not yet supported in every browser, so the technique has compatibility constraints.

Comparing Animation Timing

One major difference between these methods is how they handle easing. "Linear" here means the Bézier parameter t changes uniformly with animation progress.

Methods 2 and 3 are simple: any animation-timing-function can be applied to the composing animations, but it must be the same function applied to all of them simultaneously. This allows easing, steps, and any other timing function.

Method 1 is trickier since its timing function is already a cubic-bezier() with the first two parameters fixed by the curve itself. What you can do is adjust the vertical positions of the control points (the second and fourth parameters). Surprisingly, these adjustments map directly onto the more flexible timing capabilities of Method 2:

• Method 1 with cubic-bezier(u1, *, u2, *).
• Method 2 with animation-timing-function: cubic-bezier(u1, 1/3, u2, 2/3).

All move-x and move-y animations must share the same u1 and u2 values. This explains why Method 1 is limited: unlike the other approaches, you can't use steps() or arbitrary timing curves — only cubic-bezier() with two free parameters.

Summarizing the Trade-offs

• Method 1 (Time Warp) ties nicely into the well-known timing function trick using two keyframes and animation-timing-function, but timing options are restricted and it breaks for axis-aligned curves or orders above three.
• Method 2 (Competing Animations) offers clean, readable CSS with full timing-function support. On the downside, the setup formulas can be hard to recall and reason about.
• Method 3 (Direct Construction) models the geometry of a Bézier intuitively with explicit @property variables, though variable support and browser compatibility may be a sticking point.