0
0
CSSmarkup~5 mins

Transition property in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

The transition property helps make changes on a webpage smooth and gradual instead of sudden. It makes things look nicer and easier to follow.

When you want a button to change color smoothly when hovered over.
When you want images to grow or shrink gently on mouse hover.
When you want text or backgrounds to fade in or out softly.
When you want to animate changes in size or position without jumping.
When you want to improve user experience by showing smooth visual feedback.
Syntax
CSS
transition: property duration timing-function delay;
property is the CSS property you want to animate (like color, width, background-color).
duration is how long the transition takes (like 0.5s for half a second).
Examples
Smoothly changes background color in 0.3 seconds with a normal speed curve.
CSS
transition: background-color 0.3s ease;
Changes width over 1 second with a steady speed, starting after 0.2 seconds delay.
CSS
transition: width 1s linear 0.2s;
Applies transition to all properties over 0.5 seconds, speeding up then slowing down.
CSS
transition: all 0.5s ease-in-out;
Sample Program

This code creates a green button that changes its background color smoothly and grows slightly bigger when you hover the mouse over it.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Transition Example</title>
  <style>
    button {
      background-color: #4CAF50;
      color: white;
      padding: 1rem 2rem;
      font-size: 1.25rem;
      border: none;
      border-radius: 0.5rem;
      cursor: pointer;
      transition: background-color 0.4s ease, transform 0.3s ease;
    }
    button:hover {
      background-color: #45a049;
      transform: scale(1.1);
    }
  </style>
</head>
<body>
  <button>Hover me!</button>
</body>
</html>
OutputSuccess
Important Notes

You can use transition on many CSS properties like color, background-color, width, height, opacity, and transform.

Use transition: all to apply transitions to all animatable properties, but it can be less efficient.

Always test transitions on different devices to ensure smooth performance.

Summary

The transition property makes changes smooth and gradual.

It needs at least the property name and duration to work.

Transitions improve user experience by making interactions feel natural.