How to apply transition on element in CSS?

CSS transition

The transition feature in CSS3 allows you to change the property value of an element to occur smoothly over a specified period. In normal CSS scenario, when the property value of an element changes, the resulting value instantly updated. For example, the background color of a button changes its color when a mouse hovers it and it happens instantly. If you want to the changed value of property should work after some delay, then CSS transition comes into action. CSS3 introduces a transition feature that allows you to animate a property from the old value to the new value smoothly over time.

Now, you must specify at least two things-the name of CSS property to which you want to apply transition effect by using transition-property and the duration of transition effect by using transition-delay property.

There are following transition properties of CSS:

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

transition-property in CSS

The transition-property specifies the name of CSS property to which a transition effect is to be applied. For example, the background color of a box will change when a mouse hovers it. Let us write a code for transition property without using transition-delay property first.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transition property</title>
    <style>      
        .box{
            border:2px solid green;
            height:200px;
            width:200px;
            background-color: rgb(105, 168, 105);
            transition-property:background-color;
        }
        .box:hover{
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <h3>Transition property example.</h3>
       <div class="box" id="box1">
        <p id="wot">Green box without transition</p>
        <p id="wt">Yellow box with transition</p>
       </div>
</body>
</html>
transition-property in CSS
transition-property in CSS, www.programmingtutorial.in

transition-delay in CSS

The transition-delay property specifies the delay for the transition effect to occur. It is applied in seconds. If we apply transition-delay as 3s, then the transition effect will come into existence 3s after running your code.

transition-duration in CSS

The transition-duration in CSS specifies the duration of transition effect to occur. It defines timing in seconds or milliseconds a transition animation should take to complete.

transition-timing-function in CSS

The transition-timing-function specifies how the value of CSS properties are being affected by a transition. In other words, this function defines the speed curve of transition effect. The transition-timing-function property can have the following values in CSS.

  • ease: This is a default setting. It specifies a transition effect with slow start, then fast and finally slow again.
  • linear: It species a transition effect with the same speed from start to end of transition effect.
  • ease-in: It specifies a transition effect with a slow start.
  • ease-out: It specifies a transition effect with a slow end.
  • ease-in-out: It specifies a transition effect with slow start and slow end.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transition property</title>
    <style>      
        .box{
            border:2px solid green;
            height:200px;
            width:200px;
            background-color: rgb(99, 100, 99);
            display:inline-block;
            color:white;
        }
        #div1:hover{
            background-color: yellow;
            transition-property:background;
            transition-duration: 1s;
            transition-timing-function: ease-in-out;
            transition-delay: 5s;
        }
        #div2:hover{
            background-color: red;
            transition-property:background;
            transition-duration: 2s;
            transition-timing-function: ease-in-out;
            transition-delay: 4s;
        }
        #div3:hover{
            background-color: pink;
            transition-property:background;
            transition-duration: 3s;
            transition-timing-function: ease-in-out;
            transition-delay: 3s;
        }
        #div4:hover{
            background-color: green;
            transition-property:background;
            transition-duration: 4s;
            transition-timing-function: ease-in-out;
            transition-delay: 2s;
        }
        #div5:hover{
            background-color: gold;
            transition-property:background;
            transition-duration: 5s;
            transition-timing-function: ease-in-out;
            transition-delay: 1s;
        }
    </style>
</head>
<body>
    <h3>Transition property example.</h3>
       <div class="box" id="div1">
        <p>Transition with yellow color</p>
       </div>
       <div class="box" id="div2">
        <p>Transition with red color</p>
       </div>
       <div class="box" id="div3">
        <p>Transition with pink color</p>
       </div>
       <div class="box" id="div4">
        <p>Transition with green color</p>
       </div>
       <div class="box" id="div5">
        <p>Transition with golden color</p>
       </div>
</body>
</html>

Copy above code and paste it in notepad and run with browser, you will get result showing transition effects.

transition in CSS

This is the shorthand property of transition. Its syntax is shown below:

div{transition:width 2s linear 1s}