How Gradually Change Border Top Width Using CSS Animation

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

Using css animation we can slowly change the border-top-width property from 1px to 25px,25px to 50px,50px to 100px then back.So today we discuss how to do it.

How Gradually Change Border Top Width Using CSS Animation

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

<!DOCTYPE html>
<html>
<head>
    <title>How Gradually Change Border Top 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"/>
</head>

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

    body {
        background-color: #777891;
    }

    #myDIV {
        width: 300px;
        height: 200px;
        border: 1px solid black;
        animation: mymove 5s infinite;
    }

    @keyframes mymove {
        20% {border-top-width: 25px;}
        50% {border-top-width: 50px;}
        100% {border-top-width: 100px;}
    }


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