Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Bouncing effect using CSS keyframes

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 660
    Comment on it


    There are various methods to bounce an element. We can bounce an element using jQuery, any plugin or by simple CSS.

    To add the bouncing effect using CSS we use keyframes.

    In keyframes the animation is done by changing the style in particular time interval.
    In keyframe animation we can change style many times according to out need for different time duration.

     

    Below is the example of bouncing effect:-

     

    HTML-

    <body>
    <div id="container"> <!-- This is the main container or holder of smiley -->
     <h3>Hover over Smiley</h3> <!-- This is to add heading only -->
        <div class="circle"> <!-- For structure or circle of smiley -->
            <div class="left_circle">&nbsp;</div> <!-- element for left eye -->
            <div class="right_circle">&nbsp;</div> <!-- element for right eye -->
            <div class="mouth">&nbsp;</div> <!-- element for mouth -->
        </div>
    </div>
    </body>

     

    CSS-

    #container { /*styling background container*/
        width: 50%;
        margin: 0 auto;
        padding: 50px;
    }
    h3{ /*heading styling*/
        color: #fff;
        text-align: center;
    }
    .circle { /*Styling Base of the smiley*/
        height: 100px;
        width: 100px;
        margin: 0 auto;
        position: relative;
        background-color: #ccc;
        border-radius: 50px;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
    }
    .left_circle { /*Styling left eye of smiley*/
        top: 20px;
        left: 30px;
        height: 12px;
        width: 12px;
        border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        position: absolute;
    }
    .right_circle { /*Styling right eye of smiley*/
        top: 20px;
        right: 30px;
        height: 12px;
        width: 12px;
        border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        position: absolute;
    }
    .mouth { /*Styling mouth of smiley*/
        -webkit-border-bottom-right-radius: 25px;
        -webkit-border-bottom-left-radius: 25px;
        -moz-border-radius-bottomright: 25px;
        -moz-border-radius-bottomleft: 25px;
        border-bottom-right-radius: 25px;
        border-bottom-left-radius: 25px;
        height: 25px;
        background-color: #000;
        position: absolute;
        width: 50px;
        left: 25px;
        top: 60px;
        
    }
    div#container, .circle div {
        background-color: #c00; 
    }
    .circle:hover .mouth{ /*Fixing position of mouth on hover */
        left: 36px;
        top: 70px;
    }
    .circle:hover { /*Adding animation on the element*/
        animation-name: hover-over;
        animation-duration: 0.2;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        -webkit-animation-name: hover-over;
        -webkit-animation-duration: 0.2s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-fill-mode: forwards;
    }
    @keyframes hover-over { /*When hover over element this style will be added to the element for bounce effect*/
        0% {padding: 10px; left: 0px; top: 0px; opacity: 0.7; }
        50% {padding: 16px; left: -6px; top: -6px; opacity: 1; }
        100% {padding: 13px; left: -3px; top: -3px; opacity: 1; }
    }
    @-webkit-keyframes hover-over { /*Here webkit is added for browser support, so that bounce effect will be shown in all the browsers*/
        0% {padding: 10px; left: 0px; top: 0px; opacity: 0.7; }
        50% {padding: 16px; left: -6px; top: -6px; opacity: 1; }
        100% {padding: 13px; left: -3px; top: -3px; opacity: 1; }
    }
    @keyframes hover-out { /*When hover out the element this style will be added to the element*/
        0% {padding: 13px; left: -3px; top: -3px; opacity: 1; }
        50% {padding: 16px; left: -6px; top: -6px; opacity: 1; }
        100% {padding: 10px; left: 0px; top: 0px; opacity: 0.7; }
    }
    @-webkit-keyframes hover-out { /*Here is the webkit for browser support*/
        0% {padding: 13px; left: -3px; top: -3px; opacity: 1; }
        50% {padding: 16px; left: -6px; top: -6px; opacity: 1; }
        100% {padding: 10px; left: 0px; top: 0px; opacity: 0.7; }
    }

     

    Here is the link of above code:-

    https://jsfiddle.net/upx881xt/

     

 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: