How Gradually Change Border Right Width Using CSS Animation

Posted By Bajarangi soft , Posted On 27-11-2020

Using css animation we can change slowly right border size .So today we see how to do it.

How Gradually Change Border Right Width Using CSS Animation

Complete Code For Gradually Change Border Right Width Using CSS Animation.

<!DOCTYPE html>
<html>
<head>
    <title>How Gradually Change Border Right Width Using CSS Animation</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"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<style>
    * {
        box-sizing: border-box;
    }

    body {

        background-color: #777891;

    }

    #myDIV {
        width: 300px;
        height: 220px;
        border: 1px solid black;
        animation: mymove 20s infinite;


    }

    @keyframes mymove {
        50% {
            border-right-width: 250px;
        }
    }
</style>

<body>
<br/><br/>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: white;">Gradually Change Border Right Width Using CSS Animation</h1>
    </div>
    <div class="well">
        <div id="myDIV"></div>
    </div>
</div>
</body>
</html>

Related Post