Efeitos com Keyframes nas Imagens

Olá Amorinhas...
~Boa tarde!
Tudo bem??
Hoje eu trouxe para vocês um tuto muito legal, que é como colocar os efeitos com keyframes nas imagens, igual ao que eu uso nas imagens dos posts!
Para quem não entendeu, passe o mouse na imagem do começo do post.
Viram?! Ela treme *--*
Vamos aprender a fazer?? 

 Créditos ao We Heart  HTML pelo tutorial 

Vá em modelo >> Personalizar >> Avançado >> CSS
Cole este código:

@-webkit-keyframes jump {
0% {-webkit-transform: translatey(0px);}
50% {-webkit-transform: translatey(-10px);}
100% {-webkit-transform: translatey(0px);}
}
.jump {-webkit-transition: .5s; border-radius: 5px; box-shadow: 1px 1px #caebe6;}
.jump:hover {-webkit-animation: jump .5s alternate infinite linear;} 

Agora cole este código em um gadget ou no HTML das postagens:
<img src="link da imagem" class="jump"> 

Substitua a parte "link da imagem" pela URL da imagem desejada

Vá em modelo >> Personalizar >> Avançado >> CSS

Cole este código:

@-webkit-keyframes pisca { 

0% {opacity: 1;} 

50% {opacity: 0;} 

100% {opacity: 1;} 

} 

.pisca {-webkit-transition: .5s; border-radius: 5px; box-shadow: 1px 1px #caebe6;}

.pisca:hover {-webkit-animation: pisca .7s alternate infinite linear;}

Agora cole este código em um gadget ou no HTML das postagens:

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

Substitua a parte "link da imagem" pela URL da imagem desejada

Vá em modelo >> Personalizar >> Avançado >> CSS

Cole este código:

@-webkit-keyframes distorce {

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

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

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

}

.distorce {-webkit-transition: .5s; border-radius: 5px; box-shadow: 1px 1px #caebe6;}

.distorce:hover {-webkit-animation: distorce 1s alternate infinite linear;}

Agora cole este código em um gadget ou no HTML das postagens:

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

Substitua a parte "link da imagem" pela URL da imagem desejada

Vá em modelo >> Personalizar >> Avançado >> CSS

Cole este código:

@-webkit-keyframes shake {

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

25% {-webkit-transform: rotate(3deg); }

50% {-webkit-transform: rotate(-4deg); }

75% {-webkit-transform: rotate(3deg); }

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

}

.shake {-webkit-transition: .5s; border-radius: 5px; box-shadow: 1px 1px #caebe6;}

.shake:hover {-webkit-animation: shake .5s alternate infinite linear;} 

Agora cole este código em um gadget ou no HTML das postagens:

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

Substitua a parte "link da imagem" pela URL da imagem desejada

Vá em modelo >> Personalizar >> Avançado >> CSS

Cole este código:

@-webkit-keyframes shake {

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

25% {-webkit-transform: rotate(3deg); }

50% {-webkit-transform: rotate(-4deg); }

75% {-webkit-transform: rotate(3deg); }

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

}

.shake {-webkit-transition: .5s; border-radius: 5px; box-shadow: 1px 1px #caebe6;}

.shake:hover {-webkit-animation: shake .5s alternate infinite linear;}

Agora cole este código em um gadget ou no HTML das postagens:

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

Substitua a parte "link da imagem" pela URL da imagem desejada

E aí... Gostaram do tuto??
Usaram o efeito??
Comentem!!

Kissus~