How Do I Apply transistion In Css

admin_img Posted By Bajarangi soft , Posted On 30-09-2020

CSS transitions allows you to change property values smoothly, over a given duration, Mouse over the element below to see a CSS transition effect,To create a transition effect, you must specify two things,the CSS property you want to add an effect ,to the duration of the effect.

CSS Transistion

1.Transistion CSS Example-1

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            transition: width 2s;
        }

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

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>
<div></div>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

</body>
</html>
Example-2
<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            transition: width 2s;
        }

        #div1 {transition-timing-function: linear;}
        #div2 {transition-timing-function: ease;}
        #div3 {transition-timing-function: ease-in;}
        #div4 {transition-timing-function: ease-out;}
        #div5 {transition-timing-function: ease-in-out;}

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

<h1>The transition-timing-function Property</h1>

<p>Hover over the div elements below, to see the different speed curves:</p>

<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

Related Post