Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Keyframe animation example using CSS3

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 449
    Comment on it

    Hello Readers!

    The below code is an example of Keyframe animation using CSS3-

    HTML-

    <div class="parent">
        <div class="circle bulge"></div>
    </div>
    

    CSS-

    .parent {
      display: flex;
      justify-content: center;
      align-items: center;
        height: 500px;
    }
    
    .circle {
        background-color:#0088BF;
        width: 200px;
        height: 200px;
        border-radius:400px;
    }
    
    .bulge {
        -webkit-animation: bulge 1s 1s infinite ease-in-out alternate;
        -moz-animation: bulge 1s 1s infinite ease-in-out alternate;
        -ms-animation: bulge 1s 1s infinite ease-in-out alternate;
        -o-animation: bulge 1s 1s infinite ease-in-out alternate;
        animation: bulge 1s 1s infinite ease-in-out alternate;
    }
    
    @-webkit-keyframes bulge {
        0% {
            width: 200px;
            height: 200px;
        }
        100% {
            width: 400px;
            height: 400px;
        }
    }
    @-moz-keyframes bulge {
        0% {
            width: 200px;
            height: 200px;
        }
        50% {
            width: 400px;
            height: 400px;
        }
        100% {
            width: 200px;
            height: 200px;
        }
    }
    @-ms-keyframes bulge {
        0% {
            width: 200px;
            height: 200px;
        }
        50% {
            width: 400px;
            height: 400px;
        }
        100% {
            width: 200px;
            height: 200px;
        }
    }
    @-o-keyframes bulge {
        0% {
            width: 200px;
            height: 200px;
        }
        50% {
            width: 400px;
            height: 400px;
        }
        100% {
            width: 200px;
            height: 200px;
        }
    }
    @keyframes bulge {
        0% {
            width: 200px;
            height: 200px;
        }
        50% {
            width: 400px;
            height: 400px;
        }
        100% {
            width: 200px;
            height: 200px;
        }
    }
    

    Below is the output generated by using above HTML and CSS code

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: