Fazendo seus Efeitos com KeyFrames

{Créditos se repassar ou usar!}

Já faz um tempinho que me pediram para postar tipo uma base para fazer Efeitos com KeyFrames, só que não dá para fazer {exatamente} uma base, infelizmente. Tem que entender números e skew, translate, scale e rotate, essas coisinhas chatas. Mas não se preocupem! É super fácil!

Ah, repararam no novo lay do blog? Eu mudei porque aquele verde, apesar de ser fofinho e ter caído bem com aquele tom de vinho, fazia meus olhos doerem. Como eu disse, eu estou usando o monitor do meu pai que é bem velho e toda a vez que muda de monitor a cor que antes ficava bem agora ficou muito ruim, fazendo os olhos doerem.

Bem, vamos ao tutorial?

Primeiro temos que saber o CSS Transform {scale, translate, skew e rotate} para podermos montar um código.

Scale

Aumenta e/ou diminui uma foto/menu. Uma foto normal é definida por 1. Para aumentar a foto coloque, por exemplo, 1.1 ou para diminuir 0.8
Eu usei no efeito HeartBeat para representar um ♥ pulsando.

Exemplo de código {Veja o Live Preview de HeartBeat para entender do que eu falo}:

1% {-webkit-transform: scale(0.8);} | É a foto em tamanho pequeno

50% {-webkit-transform: scale(1);} | Foto em tamanho normal

100% {-webkit-transform: scale(1.1);} | Foto maior

Entenderam? um número maior que 1 é = a foto maior; números menores que 1 são = foto menor; uma foto com número 1 = a uma foto em seu tamanho normal.

Skew

Permite inclinar uma imagem. Números positivos vão para a direita e negativos para a esquerda.
Usado no efeito Vai e Volta.
Exemplo de código {LP do efeito}

0% {-webkit-transform: skew(15px);}

50% {-webkit-transform: skew(-25px);}

100% {-webkit-transform: skew(20px);}

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

Entenderam?

Translate

Desloca a imagem/o menu para outro lugar. Eu usei em um menu {Jumping} e também é usado em um efeito bem legal, o efeito cool {LP da efeito}. O menu "pula" e o efeito cool dá uma viradinha para a direita.

10% {-webkit-transform: translatey(-5px);}

55% {-webkit-transform: translatey(-15px);}

100% {-webkit-transform: translatey(-10px);}

Rotate

Faz a imagem/menu girar. Porém só da uma volta por completo com 360deg ou -360deg. Em meus códigos quando eu uso o rotate, eu uso número pequeno como 5deg/-9deg, por exemplo.
Eu usei no efeito Shaking, um dos meus primeiros.

0% {-webkit-transform: rotate(-5deg); }
25% {-webkit-transform: rotate(4deg); }
50% {-webkit-transform: rotate(-6deg); }
75% {-webkit-transform: rotate(9deg); }
100% {-webkit-transform: rotate(-5deg); }
100% {-webkit-transform: translatey(-10px);} {pode se usar outro efeito junto}

Montando o código!

Agora que você já sabe as classes de CSS Transform, vamos aprender a montar o código.

@-webkit-keyframes NOME {
1% {-webkit-transform: CLASSE(NÚMEROpx); }
25% {-webkit-transform: CLASSE(NÚMEROpx); }
50% {-webkit-transform: CLASSE(NÚMEROpx); }
75% {-webkit-transform: CLASSE(NÚMEROpx); }
100% {-webkit-transform: CLASSE(NÚMEROpx); }
}
@-moz-keyframes NOME {
1% {-moz-transform: CLASSE(NÚMEROpx); }
25% {-moz-transform: CLASSE(NÚMEROpx); }
50% {-moz-transform: CLASSE(NÚMEROpx); }
75% {-moz-transform: CLASSE(NÚMEROpx); }
100% {-moz-transform: CLASSE(NÚMEROpx); }
}
@-o-keyframes NOME {
1% {-o-transform: CLASSE(NÚMEROpx); }
25% {-o-transform: CLASSE(NÚMEROpx); }
50% {-o-transform: CLASSE(NÚMEROpx); }
75% {-o-transform: CLASSE(NÚMEROpx); }
100% {-o-transform: CLASSE(NÚMEROpx); }
}
.NOME {-webkit-transition: .7s; border-radius: BORDAS ARREDONDADASpx; box-shadow: 1px 1px #caebe6;}
.NOME:hover {-webkit-animation: NOME .7s alternate infinite linear;}

Em NOME coloque qualquer palavra, mas tem que ser a mesma em todos em que se pede. Em classe, coloque uma das que aprendeu acima {scale, rotate, skew e translate}. Em número, é simples, coloque qualquer número, pode ser negativo (-nº) ou positivo.
Depois é só ir brincando com os números até achar algo que você quer. Vocês podem apagar uma das linhas que tenha 1% , 25% , 50% ou 75% {não mude o 100%}, ou você pode colocar número no lugar.

ATENÇÃO:

Só use NÚMEROpx se você for usar o skew e o translate |
Se usar o rotate use NÚMEROdeg |
Se usar Scale, coloque Nº.Nº com o pontinho no meio, nunca apague o ponto!
E sempre cole o código acima de ]]></b:skin>

Para colocar na imagem, no gadget HTML/JavaScript use:

<a href="LINK"><img class="NOME" src="URL DA IMAGEM" /></a> 

Em NOME coloque o mesmo que usou no outro código, e pronto ;P

Espero que eu tenha ajudado. Eu tentei fazer algo que pudessem entender, mas caso não tenha, eu posso mudar o tutorial. É só perguntar na Ask do blog.

Beijos!