Saturday, January 20, 2018

Circle Scale In and Out Animation Effect Using CSS3

This post explain how to create circle scale in and out animation effect using css3. Here we are using CSS keyframe property to perform scale in and scale out animation effect. All the animation effect is controlled by Keyframes Rule and it provides very smooth animation effect.
CSS Scale Circle


Lets see the complete example for scale in and scale out animation effect.
<html>
<head>
    <style>
        .spinner {
            width: 100px;
            height: 100px;
            position: relative;
            margin: 100px auto;
        }
        .double-bounce1,
        .double-bounce2 {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #42a5f5;
            opacity: 0.6;
            position: absolute;
            top: 0;
            left: 0;
            -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
            animation: sk-bounce 2.0s infinite ease-in-out;
        }
        .double-bounce2 {
            -webkit-animation-delay: -1.0s;
            animation-delay: -1.0s;
        }
        @keyframes sk-bounce {
            0%, 100% {
                transform: scale(0.0);
                -webkit-transform: scale(0.0);
            }
            50% {
                transform: scale(1.0);
                -webkit-transform: scale(1.0);
                background-color: #ec407a;
            }
        }
    </style>
</head>

<body>
    <div class="spinner">
        <div class="double-bounce1"></div>
        <div class="double-bounce2"></div>
    </div>
</body>

</html>

output :


Video Link : 


Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/Circle%20Scale%20In%20and%20Out%20Animation%20Effect%20Using%20CSS3

You can use this animation effect during the ajax loading.This all about circle scale in and out animation effect using css3. in case of any questions, please do Comments in comment Box below.

No comments:

Post a Comment