CSS Transitions

By | October 3, 2021

In this article of Advance CSS tutorial, we will be learning the transition and all the other properties associated with it. By the end of this article, you will have a brief idea about using transition property to provide some animation on the element.

CSS Transition

Using the CSS transition property, we can create smooth changes on the element with a given time when an event occurred on the element. And when something changes with time, it creates the Animation effects.

Vamware

In this CSS tutorial, we have discussed the following transitions properties.

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

<Note>: Many old browser versions do not support transition property, so make sure you have the latest version of your browser.

Use CSS transition

When we use the transition property, there are two things we need to mention

  1. The CSS property on which we want to perform the transition.
  2. The time duration of the transition in seconds (s units).

If the duration is not specified, the transition won’t be performed.

Example

Create a transition in which the element box width increases from 70px to 200px in 2second when the user hovers over the element.

<!DOCTYPE html>
<html>
    <head>
        <style>
            .box{
                width: 70px;
                height:150px;
                background-color: green;
                transition: width 2s;
            }
            .box:hover{
                width: 200px;
                height: 400px;
            }
        </style>
    </head>
<body>
    <div class="box">Transition duration will only be applied on the width not height</div>
</body>
</html>

Transition on multiple properties

In the above example, we only applied transition on the width property, but if we want to apply transition on more than one property, we can do it with the help of several properties values.

When we specify several properties as a value for the transition, they must be separated with a comma.

Syntax

{transition: property1 time1, property2 time2, ….}

Example

Create a transition in which the element box width increases from 70px to 200px in 2seconds and height change from 70px to 200px in 4 seconds, when the user hover over the element.

<!DOCTYPE html>
<html>
    <head>
        <style>
            .box{
                width: 70px;
                height:70px;
                background-color: green;
                transition: width 2s, height 4s;
            }
            .box:hover{
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
<body>
    <div class="box">Box</div>
</body>
</html>

Speed Curve of the transition with transition-timing-function

With the help of transition-timing-function property, we can define the timing curve of the transition effect. It does not affect the overall duration of the transition, it just helps in providing speed effects.

transition-timing-function property only accepts one of these six values.

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • cubic-bezier(a,b,c,d)

The ease value starts the transition with slow speed, then fast the speed for the middle section, and at last, end the transition with slow speed. And it is the default value for transition-timing-function.

The linear value maintains the same transition speed.

The ease-in value starts a transition with slow speed.

The ease-out value end the transition with slow speed.

The ease-in-out start and end the transition with slow speed.

The cubic-bezier(a,b,c,d) let us define a custom speed for the transition

Example

Create a transition with constant transition speed.

<!DOCTYPE html>
<html>
    <head>
        <style>
            .box{
                width: 70px;
                height:70px;
                background-color: green;
                transition: width 4s, height 4s;
                transition-timing-function: linear;
            }
            .box:hover{
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
<body>
    <div class="box">Box</div>
</body>
</html>

Delay the transition

The transition-delay property can halt the transition for a specified time before it gets started.

Example

Delay the transition starting by 1 second.

<!DOCTYPE html>
<html>
    <head>
        <style>
            .box{
                width: 70px;
                height:70px;
                background-color: green;
                transition: width 4s, height 4s;
                transition-delay: 1s;
            }
            .box:hover{
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
<body>
    <div class="box">Box</div>
</body>
</html>

Transition with transformation

transition property is often used along with the transform property to create some amazing animation.

Let’s create a box which rotates and its size increases when the user hovers over it.

Example

<!DOCTYPE html>
<html>
    <head>
        <style>
            .box{
                width: 70px;
                height:70px;
                background-color: green;
                transition: width 4s, height 4s, transform 4s;
            }
            .box:hover{
                width: 200px;
                height: 200px;
                transform: rotate(180deg);
            }
        </style>
    </head>
<body>
    <div class="box">Box</div>
</body>
</html>

Transition sub-properties

The transition property is a shorthand for transition-property, transition-duration, transition-timing-function and transition-delay.

Syntax

{transition: transition-property transition-duration transition-timing-function transition-delay}

Example

.box {
  transition-property: height;
  transition-duration: 4s;
  transition-timing-function: ease-in;
  transition-delay: 1s;
}

This CSS code is similar to

.box {
  transition: height 4s ease-in 1s;
}

Transition Property Summary

  • The transition creates a smooth effect on changing element properties.
  • To create a transition, we must specify the property on which the transition should be performed and the duration of the transition.
  • The transition-delay property halts the transition starting for a specified time period.
  • transition property is a shorthand for transition-property, transition-duration, transition-timing-function and transition-delay properties.

People are also reading:

Leave a Reply

Your email address will not be published. Required fields are marked *