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! 😀
