CSS Transitions

CSS transitions allow you to smoothly animate changes in property values over time. Instead of instantly switching styles (e.g., color or size), transitions make the change gradual and visually appealing.

What Do Transitions Do?

When a property (like background-color, width, or opacity) changes due to an event—such as hovering—the transition controls how long and how smoothly that change happens.

Basic Syntax

				
					transition: [property] [duration] [timing-function] [delay];

Example:

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Transitions – Learn With Arshyan</title>
  <style>
    .transition-btn {
      padding: 15px 30px;
      background-color: #2980b9;
      color: white;
      font-size: 18px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.5s ease, transform 0.3s ease;
    }

    .transition-btn:hover {
      background-color: #27ae60;
      transform: scale(1.1);
    }
  </style>
</head>
<body>

  <h2>CSS Transitions Example</h2>
  <button class="transition-btn">Hover Me</button>

</body>
</html>

Explanation

transition: background-color 0.5s ease, transform 0.3s ease;

This means the background color will change smoothly over half a second.
The button also slightly grows when hovered, thanks to transform: scale(1.1).

Apply Transition to a Specific Property

You don’t have to use transition: all;. You can define transitions for individual properties.

				
					transition: width 2s;

This will only animate changes in the width property.

Timing Functions

Timing functions control the speed curve of the transition:

Function	Description
`linear`	Same speed from start to end
`ease`	Starts slow, speeds up, then slows down
`ease-in`	Starts slow
`ease-out`	Ends slow
`ease-in-out`	Starts and ends slow

Adding Delay

You can also delay the start of the transition:

				
					transition: background-color 0.5s ease-in 0.2s;

Here, the transition will start after 0.2 seconds.

Summary Table

Property	Purpose
`transition`	Shorthand to define transition
`transition-property`	Which property to animate
`transition-duration`	How long it takes
`transition-timing-function`	Speed curve
`transition-delay`	Delay before starting the effect

Learn With Arshyan Tip:

Use transitions to enhance user experience—buttons, menus, and interactive components feel more intuitive and modern when transitions are applied.