Efeito Awake

Yo, yo paçoquinhas, como vão indo? Hoje não trago um tutorial mais sim um efeito, creio que muitos já devem conhece-lo mas resolvi trazer aqui para o BC também. O efeito se chama Awake, qual ao passar o mouse em uma imagem se mexe como balanço. Achei cutie <3 Achei o tutorial lá no Pequena Garota, então se utilizarem creditem lá okay? O feito fica mais legal em imagem pequenas deixando mais mimoso e harmonizo. Quer ver o efeito clique no botão abaixo. Agora Lets Go!

Brevia do efeito

1. Vá até o HTML do seu blog e procure por  ]]></b:skin> e acima dele cole:

Códigos

@-WEBKIT-KEYFRAMES AWAKE {
10% {-WEBKIT-TRANSFORM: TRANSLATEY(-5PX);}
100% {-WEBKIT-TRANSFORM: TRANSLATEY(-10PX);}
100% {-WEBKIT-TRANSFORM: SCALE(1.1);}
0% {-WEBKIT-TRANSFORM: ROTATE(-5DEG); }
25% {-WEBKIT-TRANSFORM: ROTATE(40DEG); }
100% {-WEBKIT-TRANSFORM: ROTATE(-40DEG); }
}
@-MOZ-KEYFRAMES AWAKE {
10% {-WEBKIT-TRANSFORM: TRANSLATEY(-5PX);}
100% {-WEBKIT-TRANSFORM: TRANSLATEY(-10PX);}
100% {-WEBKIT-TRANSFORM: SCALE(1.1);}
0% {-WEBKIT-TRANSFORM: ROTATE(-5DEG); }
25% {-WEBKIT-TRANSFORM: ROTATE(40DEG); }
100% {-WEBKIT-TRANSFORM: ROTATE(-40DEG); }
}
@-O-KEYFRAMES AWAKE {
10% {-WEBKIT-TRANSFORM: TRANSLATEY(-5PX);}
100% {-WEBKIT-TRANSFORM: TRANSLATEY(-10PX);}
100% {-WEBKIT-TRANSFORM: SCALE(1.1);}
0% {-WEBKIT-TRANSFORM: ROTATE(-5DEG); }
25% {-WEBKIT-TRANSFORM: ROTATE(40DEG); }
100% {-WEBKIT-TRANSFORM: ROTATE(-40DEG); }
}
.AWAKE {-WEBKIT-TRANSITION: .7S; BORDER-RADIUS: 10PX; BOX-SHADOW: 1PX 1PX #D6D6D6;BOX-SHADOW: INSET 0 0 18PX #FFE4E1, 0 0 3PX #FFD1CC}
.AWAKE:HOVER {-WEBKIT-ANIMATION: AWAKE .7S ALTERNATE INFINITE LINEAR;
BOX-SHADOW: INSET 0 0 18PX #FFE4E1, 0 0 3PX #FFD1CC;BORDER-RADIUS: 35PX;}

2. Agora salve e vá ate Layout e abra um novo gadget de HTML/JavaScript e cole:

Códigos

<A HREF="ENDEREÇO DE URL"><TITLE="NOME"<IMG CLASS="AWAKE" SRC="LINK_DA_IMAGEM" /></A>

Arrume as partes destacadas em negrito salve o gadget e prontinho!!!