Efeito Cool

Olá pães de mel!

Acho! Finalmente consegui encaixar esse efeito que tinha sumido, mas que agora voltou né T^T eu já usei esse efeito num template antigo, mas provavelmente vocês não se lembram, então, se quiserem ver ele clique aqui. Gente, vocês que são as divas! Meu humilde template está razoável ta, eu sei quando as pessoas mentem para mim Ç.Ç SQÑ então, vamos deixar e enrolação e vamos ao efeito? Come on.

Cole isto acima de ]]></b:skin>

@-webkit-keyframes cool {

0% {transform: rotate(0deg) translate(0px); -webkit-transform: rotate(0deg) translate(0px); -moz-transform: rotate(0deg) translate(0px); -o-transform: rotate(0deg) translate(0px); -ms-transform: rotate(0deg) translate(0px);

}

12% {transform: rotate(10deg) translate(10px); -webkit-transform: rotate(10deg) translate(10px); -moz-transform: rotate(10deg) translate(10px); -o-transform: rotate(10deg) translate(10px); -ms-transform: rotate(10deg) translate(10px);

}

25% {transform: rotate(18deg) translate(18px); -webkit-transform: rotate(18deg) translate(18px); -moz-transform: rotate(18deg) translate(18px); -o-transform: rotate(18deg) translate(18px); -ms-transform: rotate(18deg) translate(18px);

}

50% {transform: rotate(10deg) translate(10px); -webkit-transform: rotate(10deg) translate(10px); -moz-transform: rotate(10deg) translate(10px); -o-transform: rotate(10deg) translate(10px); -ms-transform: rotate(10deg) translate(10px);

}

75% {transform: rotate(18deg) translate(18px); -webkit-transform: rotate(18deg) translate(18px); -moz-transform: rotate(18deg) translate(18px); -o-transform: rotate(18deg) translate(18px); -ms-transform: rotate(18deg) translate(18px);

}

87% {transform: rotate(10deg) translate(10px); -webkit-transform: rotate(10deg) translate(10px); -moz-transform: rotate(10deg) translate(10px); -o-transform: rotate(10deg) translate(10px); -ms-transform: rotate(10deg) translate(10px);

}

100% {transform: rotate(0deg) translate(0px); -webkit-transform: rotate(0deg) translate(0px); -moz-transform: rotate(0deg) translate(0px); -o-transform: rotate(0deg) translate(0px); -ms-transform: rotate(0deg) translate(0px);}  

}

.cool {-webkit-transition: .9s; border-radius: 5px;

}

.cool:hover {-webkit-animation: cool .9s alternate ease;

}

 Agora cole isto num gadgets HTML/JAVASCRIPT quer o efeito:

<a href="url" title="nome"><img src="sua imagem" class="cool">

Espero que tenham gostado! Créditos ♥

xoxo