Como criar um efeito bounce com animações do CSS3

Animações com CSS3 já não são novidades para ninguém, porém é sempre bom vermos um exemplo funcional de como podemos fazer um efeito bacana de forma simples. A idéia básica por trás é analizarmos como objeto cai sobre a superfície na primeira vez, e assim vai em direção ao ponto mais alto da página realizando um efeito de salto.

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml" class="wp-toolbar"  lang="pt-BR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Demonstração de CSS3 - CodigoSimples</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;  
            top: 100%;  
            width: 400px;  
            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;text-align:center; animation-name: bounceInUp;">  
            <div class="shadow">  
                <h1>CódigoSimples .NET</h1>  
                <img src="http://codigosimples.net/wp-content/uploads/2014/06/144x144.png" />  
            </div>  
        </div>  
    </form>  
</body>  
</html>

Faça o teste você mesmo e customize o seu código para efeitos bacanas! 😀