Efeito BanBan

Boa tarde, galera!

Como foi a semana de vocês?! Quero agradecer as ótimas visualizações do blog que, no total, foram 21.000 e mais algumas coisas! rs. Trouxe um efeito muito massa chamado BanBan! Créditos ao blog Lovers of Designs! Veja a preview aqui. Tutorial abaixo:

1 - Cole esse código no seu css:

@-webkit-keyframes banban {

0% {-webkit-transform: skew(1deg,1deg); }

25% {opacity: 0; }

50% {-webkit-transform: skew(10deg,-10deg); }

75% {-webkit-transform: skew(-10deg,10deg); }

100% {-webkit-transform: skew(-1deg,-1deg); }

}

.imagem {border-radius:1px; width: 116px;-webkit-transition-duration: .90s;}

.imagem:hover {-webkit-animation: banban 1s alternate infinite; -transition-duration: .90s;}

2 - Agora cole isso em um gadget HTML/JavaScript:

<img src="link-da-imagem" class="imagem">

Kissus