Translation

CSS

All 7 easing curves animate together so you can compare them directly. The difference between ease-in and ease-out becomes obvious when they race side by side — same duration, same distance, completely different feel.

Controls

duration900ms

delay0ms

loop

concepts

CSS transition

Smoothly interpolates a property when its value changes. Declaring the transition on the element and then assigning a new transform value is all it takes to animate.

easing curves

A cubic-bezier defines the velocity profile over time. ease-in starts slow and accelerates; ease-out-back overshoots the target before settling.

same duration, different feel

All 7 balls cover the same distance in the same time. The timing function alone determines whether motion feels snappy, sluggish, or elastic.

core pattern

// 1. Declare the easing on the element
el.style.transition = `transform 900ms cubic-bezier(0.34, 1.56, 0.64, 1)`;

// 2. Assigning a new value triggers the animation automatically
el.style.transform = `translateX(${target}px)`;

// The easing curve controls velocity — not the duration