How To Use CSS Transition Property For HTML Elements

admin_img Posted By Bajarangi soft , Posted On 06-11-2020

In CSS transitions allows you to change property values smoothly, over a given duration.So today we discuss how to do it.

How To Use CSS Transition Property For HTML Elements

When mouse hover on div element it will increase div element height and width using css.

<style>
    body {
        background: #c7254e;
    }
    .div1{
        width: 100px;
        height: 100px;
        background: red;
        transition: width 2s;
    }
    .div1:hover {
        width: 300px;
    }
    .div2{
        width: 100px;
        height: 100px;
        background: red;
        transition: width 2s, height 4s;
    }
    .div2:hover{
        width: 300px;
        height: 300px;
    }
</style>

Complete Code For CSS Transition Property For HTML Elements.
<!DOCTYPE html>
<html>
<head>
    <title>How To Use CSS Transition Property For HTML Elements</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<style>
    body {
        background: #c7254e;
    }


    .div1{
        width: 100px;
        height: 100px;
        background: red;
        transition: width 2s;
    }
    .div1:hover {
        width: 300px;
    }
    .div2{
        width: 100px;
        height: 100px;
        background: red;
        transition: width 2s, height 4s;
    }
    .div2:hover{
        width: 300px;
        height: 300px;
    }
</style>
<body>
<br/><br/>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: white;">CSS Transition Property For HTML Elements</h1>
    </div>
    <br>
    <div class="col-md-12">
        <div class="well">
            <p>Hover over the div element below, to see the transition effect:</p>
           <div class="div1"></div>
            <p>Hover over the div element below, to see the transition effect:</p>
            <div class="div2"></div>

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

Related Post