Simple Animation on circle. – knowledgebase JJ

CSS allows animation of HTML elements without using JavaScript.

Here is an example of an animated circle.

For animation, animation property is used. On mouse hover ,animation starts. Animation is bound to inner circle on mouse hover of outer green div .Here we have two circles- Outer circle and inner circle.Circle is created by giving border-radius=50% to a div with equal length and width.

.animation-outer-circle:hover .animation-inner-circle { 
            width: 100%;
            height: 100%; 
            border-radius: 50%; 
            background-color: #ffffff; 
            position: absolute; 
            top: 0;
            left: 0; 
            -webkit-animation: colorChange 3s 1 ease-in-out; 
            animation: colorChange 1.5s 1 ease-in-out; 
        }

In animation,innercircle scales from 0 to 1 back to 0 and 1 and outer circle turns white. On mouse hover, text color changes to green and when mouse is not in focus,circle turns green with black text.

@keyframes colorChange{ 
            0%{ 
                background-color:#ffffff; 
                transform: scale(0.0); 
                -webkit-transform: scale(0.0);   
           } 
            33%{
                background-color:#ffffff;
                transform: scale(1.0); 
                -webkit-transform: scale(1.0);           

           } 
           66% { 
                transform: scale(0.0); 
                -webkit-transform: scale(0.0); 
                background-color: #ffffff;            

            } 
            100%{
                background-color:#ffffff; 
                transform: scale(1.0); 
                -webkit-transform: scale(1.0); 
            } 
        }

Full HTML Code

<html>
<head>
    <style>
        body{
            background-color: black;
        }
        .animation-content{
            z-index: 1;
        }
        .animation-outer-circle {
            width: 200px;
            height: 200px;
            position: relative;
            margin: 100px auto;
            background-color: #81c500;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .animation-outer-circle:hover .animation-inner-circle {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #ffffff;
             position: absolute;
            top: 0;
            left: 0;
            -webkit-animation: colorChange 3s 1 ease-in-out;
            animation: colorChange 1.5s 1 ease-in-out;
        }
        .animation-outer-circle:hover .animation-content{
            color: #81c500;
        }
         @keyframes colorChange{
            0%{
                background-color:#ffffff;
                transform: scale(0.0);
                -webkit-transform: scale(0.0);            
             }
            33%{
                background-color:#ffffff;
                transform: scale(1.0);
                -webkit-transform: scale(1.0);         
            }
           66% {
                transform: scale(0.0);
                -webkit-transform: scale(0.0);
                background-color: #ffffff;
             }
            100%{
                background-color:#ffffff;
                transform: scale(1.0);
                -webkit-transform: scale(1.0);
            }
        } 
    </style>
</head>
<body>
    <div class="animation-outer-circle">
        <div class="animation-inner-circle"></div>
        <p class="animation-content">
            Jobin and Jismi
        </p>
    </div>
</body>
</html>

Leave a comment Cancel reply