Efeitos cavalga nas imagens (pedido ask)

Boa noite gente, tudo belezinha? Nossa, nem sei como começar mas bem, eu sei que alguns levaram um susto por eu ter fechado o blog e não te postado esses dias, mas eu realmente estava triste e super chateada com algumas coisas. Sei que muitos também acham que é para fazer charme ou querer chamar atenção, mas de longe que quero isso, até porque esses últimos meses foram bem produtivos para o blog que fiquei muito surpresa com o crescimento dele. E sou muito grata por isso muito mesmo, mas não foi por pouca coisa que queria sair deste meio, foram muitas e coisas bem chatas mesmo. Como não sabem muitos já saíram e continuam a sair da blogosfera atual por motivos bestas, mas que detonam com a vontade de qualquer um postar. Eu mesma senti isso na pele alguns dias atrás, e garanto para vocês que não é nada agradável e muitos menos saudável, foda =/

Mas retornando a minha vida aqui no blog eu estou atendendo os pedidos que ficaram para trás na ask e uma menina havia me pedido um efeito que era de algo cavalgar, eu imaginei qual fosse mas não ficaram iguais, mas se pararem para ver os efeitos eles dão a entender que estão cavalgando. Pelo menos é assim que eu vejo quando as imagens se mexem o.o Se não for por favor quem me pediu me avise que prometo que irei tentar criar um que fique bem do jeito que quer ok? Então amores me desculpem mesmo por eu ter deixado o blog fechado e ter me afastado esses dias ai, prometo que não irá acontecer ou ao menos irei tentar. Bem minhas coisas lindas, espero que curtam os efeitos em keyframes e espero que usem né? Kissus infintos da tia Roh e inté mais - ^3^ -

LIVE PREVIEW «✪»

Efeito Cavalga 1

@-webkit-keyframes cavalga {
0% {-webkit-transform: rotate(-50deg); }
25% {-webkit-transform: rotate(3deg); }
50% {-webkit-transform: rotate(-4deg); }
75% {-webkit-transform: rotate(3deg); }
100% {-webkit-transform: rotate(-50deg); }
}
.cavalga {-webkit-transition: .5s; border-radius: 2px; box-shadow: 1px 1px #fff;border: 2px solid #FFC8D4;}
.cavalga:hover {-webkit-animation: cavalga .5s alternate infinite linear;} 

Para usar o efeito em imagem:

<img src="IMAGEM" class="cavalga" />

Efeito Cavalga 2

@-webkit-keyframes cavalga2 {
0% {-webkit-transform: translatey(1px);}
25% {-webkit-transform: rotate(20deg); }
50% {-webkit-transform: translatey(-30px);}
100% {-webkit-transform: translatey(1px);}
}
.cavalga2 {-webkit-transition: .5s; border-radius: 2px; box-shadow: 1px 1px #fff;border: 2px solid #FFC8D4;}
.cavalga2:hover {-webkit-animation: cavalga2 .5s alternate infinite linear;} 

 Para usar o efeito em imagem:

<img src="IMAGEM" class="cavalga2" />

Efeito Cavalga 3

@-webkit-keyframes cavalga3 {
0% {-webkit-transform: rotate(20deg); }
10% {-webkit-transform: translatey(10px);}
25% {-webkit-transform: rotate(10deg); }
50% {-webkit-transform: rotate(-10deg); }
75% {-webkit-transform: rotate(3deg); }
100% {-webkit-transform: rotate(20deg); }
}
.cavalga3 {-webkit-transition: .5s; border-radius: 2px; box-shadow: 1px 1px #fff;border: 2px solid #FFC8D4;}
.cavalga3:hover {-webkit-animation: cavalga3 .5s alternate infinite linear;} 

Para usar o efeito em imagem:

<img src="IMAGEM" class="cavalga3" />