CSS Transitions

CSS transitions enable smooth changes in the CSS property values over the specified duration. For example,

div {
    background-color: orange;
    transition: background-color 1s linear;
}

div:hover {
    background-color: red;
}

Browser Output

Hover over the element below

Here, the transition property smoothly changes the background color from orange to red.


CSS Transition Properties

CSS transition includes the following properties:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay
  • transition (shorthand property)

Let's look at each of these properties in detail.


CSS transition-property

The transition-property specifies the CSS properties to which a transition should be applied.

The syntax of the transition-property property is,

transition-property: none | all | property-name

Here,

  • none: no properties will transition
  • all: all properties will transition
  • property-name: specifies the CSS properties for the transition

Let's see an example,

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

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS transition-property</title>
    </head>

    <body>
        <p>Hover over the element below</p>
        <div class="box"></div>
    </body>

</html>
div.box {
    width: 100px;
    height: 100px;
    background-color: orange;

    /* specifies width for the transition */
    transition-property: width;
    transition-duration: 1s;
}

/* styles while hovering element*/
.box:hover {
    width: 200px;
}

Browser Output

Hover over the element below

In the above example,

transition-property: width

transitions the width property smoothly from 100px to 200px.

Note: The default value of transition-duration is 0s, so its value must be specified to see the effect of transition.


CSS transition-duration Property

The transition-duration property specifies the time for the completion of the transition.

The syntax of the transition-duration property is:

transition-duration: time-value

The time-value represents the duration of the transition in seconds(s) or milliseconds(ms).

Let's see an example,

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

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS transition-duration</title>
    </head>

    <body>
            <p>Hover over the element below </p>
            <div class="box"></div>
    </body>

</html>
div.box {
    width: 100px;
    height: 100px;
    background-color: orange;
    transition-property: background-color;

    /* specifies the duration for transition to complete */
    transition-duration: 1s;
}

/* styles while hovering element*/
.box:hover {
    background-color: red;
}

Browser Output

Hover over the element below

In the above example,

transition-duration: 1s

specifies that the background color transition lasts for 1 second.


CSS transition-timing-function Property

The transition-timing-function property defines how transition properties change during a transition.

The syntax of the transition-timing-function property is:

transition-timing-function: timing-function

Here, timing-function represents any of the following values:

  • ease: transition starts slowly, accelerates at the middle, and slowly ends
  • linear: specifies the constant transition speed throughout the duration
  • ease-in: specifies the transition with a slow start and fast end
  • ease-out: specifies the transition with a fast start and slow end
  • ease-in-out: specifies the transition with a slow start and end
  • step-start: specifies the transition with an instant beginning that remains constant throughout the end
  • step-end: specifies the transition with a constant beginning that ends instantly
  • steps(int, start | end): represents transition with stepped timing function and defined interval
  • cubic-bezier: defines a custom transition with specified values

Let's see an example,

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

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS transition</title>
    </head>

    <body>
        <p>Hover over the element below</p>

        <div class="box box1">Ease</div>
        <div class="box box2">Linear</div>
        <div class="box box3">Ease-In</div>
        <div class="box box4">Ease-Out</div>
        <div class="box box5">Ease-In-Out</div>
        <div class="box box6">Step-start</div>
        <div class="box box7">Step-end</div>
        <div class="box box8">Steps(5,end)</div>
        <div class="box box9">Cubic-bezier</div>
    </body>

</html>
.box {
    width: 100px;
    height: 100px;
    text-align: center;
    margin-bottom: 12px;
    background-color: orange;
    transition-property: width;
    transition-duration: 1s;
}

/* Different timing functions for each box */
.box1 {
    transition-timing-function: ease;
}

.box2 {
    transition-timing-function: linear;
}

.box3 {
    transition-timing-function: ease-in;
}

.box4 {
    transition-timing-function: ease-out;
}

.box5 {
    transition-timing-function: ease-in-out;
}

.box6 {
    transition-timing-function: step-start;
}

.box7 {
    transition-timing-function: step-end;
}

.box8 {
    transition-timing-function: steps(5, end);
}

.box9 {
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* styles while hovering elements */
.box:hover {
    width: 500px;
}

Browser Output

Hover over the element below

Ease
Linear
Ease-In
Ease-Out
Ease-In-Out
Step-start
Step-end
Steps(5,end)
Cubic-bezier

In the above example, different transition timing functions change the width property from 100px to 90% width of container.

Note: The transition-timing-function is also known as an easing function.


CSS transition-delay Property

The transition-delay property specifies the time duration for a transition to start.

The syntax of the transition-delay property is:

transition-delay: time_value

The time_value represents the duration for a transition to start in seconds(s) or milliseconds(ms).

Let's see an example,

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

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS transition-delay</title>
    </head>

    <body>
            <p>Hover over the element below</p>
            <div class="box"></div>
    </body>

</html>
div.box {
    width: 100px;
    height: 100px;
    background-color: orange;
    transition-property: background-color;

    /* delays the transition by 1s */
    transition-delay: 1s;
}

/* styles while hovering element */
.box:hover {
    background-color: red;    
}

Browser Output

Hover over the element below

In the above example,

transition-delay: 1s;

delays the transition by 1 second before changing the background color from orange to red.

Note: The negative time value creates the illusion that the transition started before any trigger event occurred. However, it still begins immediately upon the trigger event.


CSS transition Property

The transition is a shorthand property to specify transition property, transition-duration, transition-timing-function, and transition-delay properties.

The syntax of the transition property is:

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

Let's see an example,

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

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS transition property</title>
    </head>

    <body>
            <p>Hover over the element below</p>
            <div class="box"></div>
    </body>

</html>
div.box {
    width: 100px;
    height: 100px;
    background-color: orange;
    transition: width 2s linear 1s;
}

/* styles while hovering element */
.box:hover {
    width: 200px;
}

Browser Output

Hover over the element below

In the above example,

transition: width 2s linear 1s;

is equivalent to,

transition-property: width;
transition-duration: 2 seconds;
transition-timing-function: linear;
transition-delay : 1 second;

Note: The order of property values within the transition property is important.

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges