Transition Shot hand Width Multiple Properties In Css

Posted By Bajarangi soft , Posted On 09-10-2020

The transition property in CSS is used to create some transition in an element. This property change the value smoothly. This article contains hover effect over a div element to change the width and height of elements after transition.

The list of transition property are given below:

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

syntax:

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

Example-1

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: #fc0885;
            text-align:center;
        }
        h3 {
            text-align:center;
            color:darkred;
        }
        input[type=text] {
            width: 100px;
            -webkit-transition: width .35s ease-in-out;
            transition: width .35s ease-in-out;
        }
        input[type=text]:focus {
            width: 250px;
        }
    </style>
</head>
<body>
<h1>Bajarangi soft</h1>
<h3>Search: <input type="text" name="searchbox"></h3>
</body>
</html>

Note: If the duration part is not specified, the transition will have no effect, because its default value is 0. The transition property specify mainly two things. The first one is the CSS property to add effects and second one is the duration unless the transition will be effect less.
Example-2

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color:Green;
        }
        div {
            width: 1px;
            height: 0px;
            text-align:center;
            background: Green;
            -webkit-transition: width 2s, height 2s;
            transition: width 2s, height 2s;
        }
        div:hover {
            width: 300px;
            height: 240px;
        }
    </style>
</head>
<body>
<h1>Bajarangi soft</h1>
<div>
    <img src=
                 "b1.jpg"
         align="middle"></div>
</body>
</html>

Related Post

How To Use CSS Style Transition Properties With JavaScript
Transition Shot hand Width Multiple Properties In Css
How Css Transition Work With Line Gradient Background Button
How To Use CSS Transition Property For HTML Elements
How To Use CSS Transition Timing Function Property
How To Use CSS Transition Delay Property With HTML
How Do I Use CSS Transition And Transform Properties
How To Transition To New Page With Slide Left To Right In Flutter
How To Make Button With Transition Effect Animation Hover Using CSS