CSS linear() Function

The linear() function allows you to create complex, custom easing curves for your animations and transitions.

Before this function was introduced, CSS animations were mostly limited to the cubic-bezier() function (which powers keywords like ease, ease-in, and ease-out). While cubic-bezier() is great for smooth acceleration and deceleration, it has a major limitation: it can only handle a single curve with one peak. This makes it impossible to create realistic "spring" or "bounce" effects where a value needs to wobble back and forth multiple times.

The linear() function solves this by letting you define a series of points (stops). The browser then draws straight lines between these points. If you provide enough points, these straight lines blend together to simulate highly complex curves.

Note: Don't confuse the linear() function with the traditional linear keyword. The keyword creates a single, constant speed from start to finish. The function creates a custom path by connecting multiple points.

Here's an example of a box using the linear() function to create a realistic "elastic" or "spring" effect when hovered:

View Output Full Screen Preview

How the Stops Work

The linear() function accepts a comma-separated list of numbers, usually ranging from 0 (the start of the animation) to 1 (the end of the animation). You can also use numbers outside this range to make the animation overshoot its target.

If you just provide numbers, the browser spaces them out evenly across the duration of the animation. For example, linear(0, 0.5, 1) means the animation will be at 0 at the start, 0.5 halfway through, and 1 at the end.

To get more control, you can attach percentages to specify exactly when the animation should reach a certain point. For example, linear(0, 1 20%, 1) means the animation will shoot up to its final state within the first 20% of the time, and then stay there for the remaining 80%.

Comparing Easing Functions

To really see the difference, it helps to compare a standard easing keyword with a custom linear() curve. In the example below, both boxes take exactly the same amount of time (2 seconds) to cross the screen, but their journeys are completely different.

.runner {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background-color: #007bff;
    
    /* Both animations take exactly 2 seconds */
    animation: runAcross 2s infinite alternate;
  }

/* Standard ease-in-out */
  .standard-ease {
    background-color: #dc3545;
    animation-timing-function: ease-in-out;
  }

/* Custom linear() bounce */
  .custom-linear {
    background-color: #28a745;
    animation-timing-function: linear(
      0, 0.01, 0.04 8%, 0.16 17%, 0.46 29%, 0.74 39%, 0.9 46%, 
      0.98 53%, 1.01 58%, 1.01 62%, 0.99 68%, 0.98 73%, 1 83%, 1
    );
  }

@keyframes runAcross {
    0% {
      transform: translateX(0);
    }
    100% {
      /* Move 300px to the right */
      transform: translateX(300px);
    }
  }
</style>

View Output Full Screen Preview

Official Syntax

The official syntax of the linear() function is as follows:

Where <linear-stop-list> is defined as:

Possible Values

As indicated in the official syntax, the linear() function accepts a comma-separated list of stops:

number: Represents the progress of the animated property. 0 is the initial state, and 1 is the final state. Values can go below 0 or above 1 to create overshoot effects.
percentage: An optional time marker indicating when the animation should reach the specified number. You can provide one percentage (e.g., 0.5 25%) or two percentages to create a hold effect (e.g., 0.5 25% 50%).

CSS Specifications

The linear() function is defined in CSS Easing Functions Level 2 (Editor's Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.