What is ease in CSS transition: Simple Explanation and Example

In CSS transitions, ease is a timing function that makes the animation start slow, speed up in the middle, and slow down at the end. It creates a smooth and natural movement effect for changes in CSS properties.

How It Works

Imagine pushing a swing. At first, it moves slowly as you start pushing, then it speeds up in the middle of the swing, and finally slows down as it reaches the highest point. The ease timing function in CSS works similarly for animations.

When you change a CSS property with a transition using ease, the change doesn't happen at a constant speed. Instead, it starts gently, speeds up, and then slows down before finishing. This makes the animation feel smooth and natural, rather than abrupt or mechanical.

Example

This example shows a box that changes its background color smoothly using the ease timing function when you hover over it.

css

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

.box {
  width: 150px;
  height: 150px;
  background-color: #3498db;
  transition: background-color 1.5s ease;
  border-radius: 12px;
  cursor: pointer;
}

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

Output

A blue square box centered on the page that smoothly changes to red when hovered over, starting slow, speeding up, then slowing down.

When to Use

Use ease when you want your animations or transitions to feel smooth and natural, similar to how objects move in real life. It works well for buttons, menus, hover effects, and any UI changes where abrupt speed changes would feel jarring.

For example, when a button changes color or size on hover, using ease makes the change feel friendly and polished. It helps guide the user's eye gently rather than surprising them with sudden jumps.

Key Points

• ease is a CSS timing function for transitions and animations.
• It starts slow, speeds up in the middle, and slows down at the end.
• Creates smooth, natural-feeling animations.
• Commonly used for hover effects and UI changes.

Key Takeaways

ease makes CSS transitions start slow, speed up, then slow down for smoothness.

It helps animations feel natural and less mechanical.

Use it for hover effects and UI changes to improve user experience.

It is the default timing function for CSS transitions.

You can customize timing with other functions if needed.