CSS - Transitions

Previous
Quiz
Next

CSS Transitions are used to handle animation speed in CSS. This allows you to animate changes in an element's style properties over a specified duration.

Example of CSS Transitions

Here you can see a simple impact of CSS transition, we have applied transitions on one element so you can differentiate with and without transition effect.

Without Transition
With Transition

 

Table of Contents


 

How to Use Transition in CSS?

Follow this steps to create transition effects in CSS.

  • Select the Element: Use CSS selectors to target a particular DOM element to apply transition.
  • Specify the Property: For the value of transition property, choose the CSS property you want to animate (e.g., background-color, width).
  • Set the Duration: Define how long the transition should take (e.g., 0.5s for 0.5 seconds). The default value for this is 0, so if you didn't specify a positive value for this you won't see any transition effect.
  • Define the Timing Function and Delay: These are optional properties. The timing function defines speed curve of transition (ease, linear, etc.) and delay defines the wait before which transition starts.
  • Define the End State: Specify the final state of the property when the element is interacted with (e.g., on hover).
.selector {
    width: 10px;
    transition: width 2s ease 0s;
}    
.selector:hover {
    width: 20px;
}

This declaration will create a transition effect for 2 second with ease function for width property to change from 10px to 20px when hovered.

Change Several Property Values

We can define different transition effect for different properties by specifying comma separated values as shown below.

div {
    transition: width 2s, height 4s, background-color 3s;
}

This specify that change of width should happen in 2s, change of height should happen in 4 seconds and background color should change in 3 seconds. Now let's look at an example.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        body{
            padding: 30px;
            background-color: #f0f0f0;
            height: 250px;
        }
        div {
            width: 100px;
            height: 100px;
            padding: 8px;
            color: white;
            background-color: darkgreen;
            transition: width 2s, height 4s, background-color 3s;
        }
        div:hover {
            width: 200px;
            height: 200px;
            background-color: white;
        }
    </style>
</head>

<body>
    <div> 
        Hover over me
    </div>
</body>

</html>

Speed Curve of Transition

The CSS transition-timing-function property is used to specify the speed curve of a CSS transition. It defines how the intermediate values between the start and end of the transition are calculated.

div {
    transition: width 2s, height 4s;
    transition-timing-function: ease; 
}

Also we can define timing function inside transition property as third value.

Following are values for timing function:

  • ease: The transition will start slow, then fast, then end slowly (The default value)
  • linear: Transition with the same speed from start to end
  • ease-in: Transition with a slow start
  • ease-out: Transition with a slow end
  • ease-in-out: Transition with a slow start and end
  • cubic-bezier(n,n,n,n): This lets us to define our own values for speed. To know more check out Cubic Bezier Function article.

Example

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

<head>
    <style>
        div {
            width: 50px;
            height: 50px;
            background-color: #3498db;
            transition: width 3s;
            left: 0;
        }

        div:hover {
            width: 300px;
        }
    </style>
</head>

<body>
    <h1>Hover Each to see transition</h1>
    <h2>linear</h2>
    <div style="transition-timing-function: linear;">
    </div>

    <h2>ease</h2>
    <div style="transition-timing-function: ease;">
    </div>

    <h2>ease-in</h2>
    <div style="transition-timing-function: ease-in;">
    </div>

    <h2>ease-out</h2>
    <div style="transition-timing-function: ease-out;">
    </div>

    <h2>ease-in-out</h2>
    <div style="transition-timing-function: ease-in-out;">
    </div>

    <h2>cubic-bezier(0.25, 0.1, 0.25, 1)</h2>
    <div style="transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);">
    </div>
</body>
</html>

Delay the Transition Effect

The transition-delay property is used to specify a wait time before the transition starts. We can specify this using transition shorthand property also.

div {
    transition: width 2s;
    transition-delay: 2s; 
}

Example

When you hovered the div element in output, transition take place after 1 second waiting time.

<!DOCTYPE html>
<html>

<head>
    <style>
        body{
            padding: 30px;
            background-color: #f0f0f0;
            height: 250px;
        }
        div {
            width: 100px;
            height: 100px;
            padding: 8px;
            color: white;
            background-color: darkgreen;
            transition: width 2s, height 4s, background-color 3s;
            transition-delay: 1s; 
        }
        div:hover {
            width: 200px;
            height: 200px;
            background-color: white;
        }
    </style>
</head>

<body>
    <div> 
        Hover over me
    </div>
</body>

</html>

Transition + Transform

CSS transform can also be used with transition effects. Check the code below.

div {
    transition: transform 2s;
}

This declaration specifies that If a transform (like scaling, rotating, or translating) is applied to the div, the transform effect will animate smoothly over 2 seconds.

Example

<!DOCTYPE html>
<html>

<head>
    <style> 
        div {
          width: 100px;
          height: 100px;
          background: darkgreen;
          transition: transform 2s;
        }
        
        div:hover {
          transform: rotate(180deg);
        }
    </style>
</head>

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

</html>

CSS Transition Shorthand Property

CSS transition is shorthand property for following properties.

div{
    transition: [property] [duration] [timing-function] [delay];
}
  • property: Specifies the name of the CSS property to which the transition is applied (e.g., width, height, transform). You can use all to apply the transition to all properties that change.
  • duration: Specifies how long the transition effect should last (e.g., 2s for 2 seconds).
  • timing-function: Specifies speed curve for transition.
  • delay: Sets a delay before the transition starts (e.g., 0.5s for half a second).

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: blue;
            transition: all 2s ease-in 0.5s;
        }
        
        div:hover{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div > </div>
</body>

</html>

CSS Transition All Properties

Some of the common properties which is used to transition in CSS

Property Description Example
transition Short hand property for all transition properties.
transition-delay Used to specify a wait time before the transition starts.
transition-property Used to specifies the property name
transition-timing-function Used to specifies the time function to do run transition
Print Page
Previous
Next
Advertisements