What is Linear in CSS Transition: Simple Explanation and Example

In CSS, linear is a timing function for transitions that makes the change happen at a constant speed from start to finish. It means the property changes evenly over the duration without speeding up or slowing down.

How It Works

Imagine you are watching a car move from one point to another at a steady speed without speeding up or slowing down. This is what the linear timing function does in CSS transitions. It makes the change happen evenly over time.

When you apply a transition with linear, the browser changes the property smoothly and at the same pace throughout the entire duration. This is different from other timing functions that might start slow and then speed up or vice versa.

This constant speed effect is useful when you want a simple, predictable animation that feels steady and uniform.

Example

This example shows a box that changes its background color smoothly at a constant speed when you hover over it. The linear timing function makes the color change steady from start to end.

css

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f0f0;
}

.box {
  width: 150px;
  height: 150px;
  background-color: #3498db;
  transition: background-color 2s linear;
  border-radius: 8px;
  cursor: pointer;
}

.box:hover {
  background-color: #e74c3c;
}

Output

A blue square box in the center of the page that smoothly changes to red over 2 seconds at a constant speed when hovered.

When to Use

Use linear when you want your animation or transition to feel steady and predictable, without any acceleration or deceleration. It works well for simple effects like color changes, moving objects at a constant pace, or fading elements evenly.

For example, if you want a progress bar to fill up smoothly at a constant rate or a background color to shift evenly, linear is a great choice. It helps keep the user experience calm and consistent.

Key Points

• Linear means the transition speed is constant from start to finish.
• It creates smooth, even changes without speeding up or slowing down.
• Good for simple, predictable animations like color or position changes.
• Different from easing functions that change speed during the transition.

Key Takeaways

linear makes CSS transitions change at a constant speed.

It creates smooth, even animations without acceleration or deceleration.

Use it for simple effects like color changes or steady movements.

It differs from easing functions that vary speed during transitions.