What is ease-in-out in CSS transition: Simple Explanation and Example

ease-in-out is a CSS transition timing function that makes an animation start slowly, speed up in the middle, and then slow down again at the end. It creates a smooth and natural effect by combining both ease-in and ease-out behaviors in one transition.

How It Works

Imagine pushing a swing. At first, you push gently, then the swing moves faster in the middle, and finally slows down before stopping. This is how ease-in-out works in CSS transitions. It controls the speed of the change so it starts slow, speeds up, and then slows down again.

This timing function helps animations feel smooth and natural, avoiding sudden jumps or stops. It combines the effects of ease-in (slow start) and ease-out (slow end) into one seamless motion.

Example

This example shows a box that changes its background color smoothly using ease-in-out 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-in-out;
  border-radius: 12px;
  cursor: pointer;
}

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

Output

A blue square box in the center of the page that smoothly changes to red when hovered over, starting slow, speeding up, then slowing down again.

When to Use

Use ease-in-out when you want your animations or transitions to feel smooth and natural. It works well for buttons, menus, or any interactive elements where a gentle start and end improve user experience.

For example, when a button changes color or size on hover, ease-in-out makes the change less abrupt and more pleasant to watch. It is a good default choice for many UI animations because it balances speed and smoothness.

Key Points

• ease-in-out starts slow, speeds up, then slows down again.
• It combines ease-in and ease-out effects.
• Creates smooth, natural animations.
• Good for interactive UI elements like buttons and menus.
• Improves user experience by avoiding sudden changes.

Key Takeaways

ease-in-out makes transitions start and end slowly with a faster middle phase.

It creates smooth and natural animation effects by combining ease-in and ease-out.

Use it for UI elements to improve visual comfort and user experience.

It is a common and versatile timing function for many CSS transitions.