Efeito fluffy

Tadaima ^^

O tutorial que trago hoje não é exclusivo, aliás, é do blog Having Cherry, um dos mais bonitinhos, se alguém aqui se interessa pela minha opinião. Não mudei as cores nem nada, poderão visualizar o efeito na prévia, mas o tutorial está ligeiramente adaptado por mim, já que organizei o código e retirei as linhas que restringiam o tuto a apenas um tamanho. Creio que assim está bem mais prático. Bem, mas vejam então:

Ilustrações tiradas daqui: www

Prévia: www
Tutorial:

Procure por:

/b:skin

Acima acrescente:

@-webkit-keyframes move {
0% {-webkit-transform: rotate(0deg); }
25% {-webkit-transform: scale(0.10); }
50% {-webkit-transform: rotate(100deg); }
100% {-webkit-transform: rotate(0deg); }
}
@-webkit-keyframes RH {
90% { -webkit-transform:scale(1.2);-moz-transition: all 0.8s ease-out; }
40%{ -webkit-transform: scale(0.5);-moz-transition: all 0.8s ease-out;}
50% { -webkit-transform:scale(1.7);-moz-transition: all 0.8s ease-out; }
}
.fluffy {
border-radius:1px;
opacity:1;
border: 2px solid #e3e4e4;
margin: -1.5px;
z-index: 50;
-webkit-transition-duration: .90s;
-webkit-transition: All 0.8s ease-out;
-moz-transition: All 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;
}
.fluffy:hover {
-webkit-animation: RH 1s;-webkit-transform:scale(1.4);
}

Para aplicar, basta adicionar num gadget HTML/Javascript o código habitual:

<img src="URLDAIMAGEM" class="fluffy" />

Era isto, espero que tenham gostado.