How To Create Bounce Effect With CSS3 Animation

The basic idea behind how the bounce will start is that when the object drops on the surface the first time, it bounces of the surface and will reach its highest level. Then it gradually reaches a lower point with every bounce, until the object stops bouncing.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Bounce Demo By DC</title>
    <style type="text/css">
        .animated {
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }
        .bounceInUp {
            -webkit-animation-name: bounceInUp;
            animation-name: bounceInUp;
        }
        .shadow {
            padding: 15px 15px 15px 40px;
            top: 100%;
            width: 300px;
            margin-top: 20px;
            background: #ffffff;
            border: 1px solid #cbcbcb;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            -moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
            -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
            box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
        }

        @-webkit-keyframes bounceInUp {
            0% {
                opacity: 0;
                -webkit-transform: translateY(2000px);
                transform: translateY(2000px);
            }
        }
        @keyframes bounceInUp {
            0% {
                opacity: 0;
                -webkit-transform: translateY(2000px);
                -ms-transform: translateY(2000px);
                transform: translateY(2000px);
            }
            60% {
                opacity: 1;
                -webkit-transform: translateY(-30px);
                -ms-transform: translateY(-30px);
                transform: translateY(-30px);
            }
            80% {
                -webkit-transform: translateY(10px);
                -ms-transform: translateY(10px);
                transform: translateY(10px);
            }

            100% {
                -webkit-transform: translateY(0);
                -ms-transform: translateY(0);
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="bounceInUp animated" style="visibility: visible; animation-name: bounceInUp;">
            <div class="shadow">
                <h1>Deepak Chaudhary</h1>
                <img src="http://www.c-sharpcorner.com/App_themes/csharp/images/sitelogo.png" />
            </div>
        </div>
    </form>
</body>
</html>