CSS transition Property

Last Updated : 11 Jul, 2025

The transition-property CSS property sets which CSS properties will have a transition effect, enabling smooth animations for specified properties when they change, without altering the layout or requiring JavaScript.

This property is a combination of four sub-properties

transition-property
transition-duration
transition-timing-function
transition-delay

Note: The transition effect can be defined in two states (hover and active) using pseudo-classes like hover or: active or classes dynamically set by using JavaScript.

Syntax

selector {
    transition: <transition-property> 
                <transition-duration> 
                <transition-timing-function> 
                <transition-delay>;
}

Note: If any of the values are not defined then the browser assumes the default values.

Property Values

Property	Description
transition-property	Specifies the CSS properties to which a transition effect should be applied.
transition-duration	Specifies the length of time a transition animation should take to complete.
transition-timing-function	Specifies the speed curve of the transition effect.
transition-delay	Specifies the delay before the transition effect starts.

Example 1: Background Color Transition

In this example we creates a blue box that transitions to green when hovered over, utilizing the CSS transition property to animate the color change over 0.5 seconds with an ease timing function.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>CSS Transition Example </title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            transition: background-color 0.5s ease;
        }

        .box:hover {
            background-color: green;
        }
    </style>
</head>

<body>
    <h2>Css transition property</h2>
    <div class="box"></div>
</body>

</html>

Output:

gif5 — CSS transition Property Example Output

Example 2: Width and Height Transition

This example demonstrates the use of the transition property to change the width and height

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>CSS Transition property </title>
    <style>
        .rectangle {
            width: 100px;
            height: 50px;
            background-color: red;
            transition: width 0.3s ease, height 0.3s ease;
        }

        .rectangle:hover {
            width: 200px;
            height: 100px;
        }
    </style>
</head>

<body>
    <h2>CSS transition property</h2>
    <div class="rectangle">
        <p>Width and Height Transition</p>
    </div>
</body>

</html>