How Gradually Change Border Color Using CSS Animation

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

Using Css animation we can change border color .so today we discuss how to do it.

How Gradually Change Border Color Using CSS Animation

Complete Code For Gradually Change Border Color Using CSS Animation.

<!DOCTYPE html>
<html>
<head>
    <title>How Gradually Change Border Color 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: 15px solid black;
        animation: mymove 20s infinite;


    }

    @keyframes mymove {
        50% {border-color: lightblue;}
        100% {border-color: lightgreen;}
    }
</style>

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