0Pricing
CSS Academy · Lesson

Easing Functions: ease linear cubic-bezier

Control the speed curve of transitions using built-in keywords and cubic-bezier() functions.

Easing Functions: ease linear cubic-bezier is a free CSS Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What is an Easing Function?

An easing function controls the speed curve of a transition or animation — how fast it accelerates or decelerates over its duration.

linear

linear maintains constant speed throughout the transition. Useful for loading bars and progress indicators where steady motion is expected.

.progress { transition: width 1s linear; }

ease (Default)

ease starts fast, then slows down near the end. This is the default and feels natural for most UI transitions.

ease-in

ease-in starts slowly and accelerates. Good for elements that are leaving the screen (exit animations).

.modal {
  transition: opacity 300ms ease-in;
}
.modal.closing { opacity: 0; }

ease-out

ease-out starts fast and decelerates. Great for elements entering the screen — they arrive with energy and settle smoothly.

.modal {
  transition: opacity 300ms ease-out;
}
.modal.opening { opacity: 1; }

ease-in-out

ease-in-out starts and ends slowly, with faster motion in the middle. Best for looping or back-and-forth animations.

cubic-bezier()

Defines a custom cubic Bézier curve with four control points. Enables spring-like and custom easing curves.

.card {
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Spring overshoot effect */
}

Reading cubic-bezier Values

The four values define two control points: cubic-bezier(x1, y1, x2, y2). Values above 1 on y axis create overshoot (spring) effects. Use tools like easings.net to visualize curves.

steps() Function

steps(n, direction) divides the animation into n discrete equal steps. Perfect for sprite animations and typewriter effects.

.sprite {
  animation: walk 0.5s steps(8) infinite;
}

@keyframes walk {
  to { background-position: -800px 0; }
}

steps() Direction Keywords

The second argument controls where the step occurs:

  • jump-start: first step at time 0
  • jump-end: last step at end time (default)
  • jump-both: steps at both start and end
  • jump-none: no step at either end

Modern: linear() for Complex Curves

The new linear() function allows defining arbitrary easing curves through multiple points — enabling spring and bounce effects in pure CSS without cubic-bezier limitations.

.spring {
  transition-timing-function: linear(
    0, 0.4 10%, 0.8 25%, 1.1 40%, 1 55%, 0.95 70%, 1
  );
}

Quick Check

Which easing function maintains a constant speed throughout the entire transition?

Recap

Easing functions control animation speed curves. Built-in options: linear, ease, ease-in, ease-out, ease-in-out. Custom curves use cubic-bezier(). Discrete steps use steps(). The new linear() function enables complex spring-like curves.

Frequently asked questions

Is the “Easing Functions: ease linear cubic-bezier” lesson free?

Yes — the full text of “Easing Functions: ease linear cubic-bezier” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Easing Functions: ease linear cubic-bezier”?

Control the speed curve of transitions using built-in keywords and cubic-bezier() functions. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Easing Functions: ease linear cubic-bezier” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Transition Property Duration and Timing
  2. Easing Functions: ease linear cubic-bezier
  3. Transitioning Multiple Properties
  4. Performance: Transformable vs Repainting Props
← Back to CSS Academy