Criando efeitos com Keyframe~

Olá gente 〈( ^.^)ノ me desculpem não ter postado ontem , podem me bater q. Estou pensando em postar em dias irregulares por conta do colégio ensino médio não é mole nao  apesar disso vou retribuir e acompanhar blogs normalmente q . Enfim acabei não indo para o colégio hoje por que acordei muito tarde e não ia chegar a tempo entao tirei um dia de folga. Ah tem mais acreditam que levei block no face por causa de um status que eu nem publiquei? parece que tá todo mundo levando block por citar algo a ver com "Deus" , e daí? mesmo que eu tivesse falado isso , nem é motivo pra bloquear qq deu bug agora. Seguindo a lista de pedidos vou ensinar como faço os efeitos daqui , é bem fácil o método  se chama Keyframe~~~~~~


Propriedades :

Skew :  A distorção do objeto tanto pra esquerda , quanto pra direita .
Numeros negativos fazem ir para a esquerda , e positivos para a direita. Assim :

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

Scale : O zoom do objeto , diminui  ou aumenta .
Numeros após a vírgula diminuem (0.5), 1 mantem no estado normal , e Numeros antes da vírgula aumentam (1.7)

75% {-webkit-transform: scale(1.108deg);}  

Translate : O deslocamento do objeto , pra esquerda ou para a direita.
Para a esquerda , use numeros negativos e para a direita positivos( sem o +)

75% {-webkit-transform: translate(59px);}  

Rotate : A rotação do objeto.
Quanto maior o numero maior é o giro , (15 , 25 ) 360deg ou -360deg para um giro completo.

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

Montando o efeito :

Pra montar o efeito é só usar porcentagem . A porcentagem serve para definir quantos movimentos o efeito vai ter e qual e quais as propriedades de cada um dos movimentos . Assim:


/*------- Parte 1 - Chrome -------*/
@-webkit-keyframes NOME {
0% {-webkit-transform: PROPRIEDADE(NUMEROdeg);}
25% {-webkit-transform: PROPRIEDADE(NUMEROdeg);}
50% {-webkit-transform: PROPRIEDADE(NUMEROdeg);}
75% {-webkit-transform: PROPRIEDADE(NUMEROdeg);}
100% {-webkit-transform: PROPRIEDADE(NUMEROdeg);}
}
/*------- Parte 2 - Firefox-----*/
@-moz-keyframes NOME {
0% {-webkit-transform: PROPRIEDADE(NUMEROdeg);}
25% {-webkit-transform: PROPRIEDADE(NUMEROdeg);}
50% {-webkit-transform: PROPRIEDADE(NUMEROdeg);}
75% {-webkit-transform: PROPRIEDADE(NUMEROdeg);}
100% {-webkit-transform: PROPRIEDADE(NUMEROdeg);}
}

/*-------Parte 3 opera mini ------------*/
@-o-keyframes NOME {
0% {-webkit-transform: PROPRIEDADE(NUMEROdeg);}
25% {-webkit-transform: PROPRIEDADE(NUMEROdeg);}
50% {-webkit-transform: PROPRIEDADE(NUMEROdeg);}
75% {-webkit-transform: PROPRIEDADE(NUMEROdeg);}
100% {-webkit-transform: PROPRIEDADE(NUMEROdeg);}
}

.NOME {
-webkit-transition: .7s;
border: 1px solid #cor;
}
.NOME:hover {
-webkit-animation: NOME .7s alternate infinite linear ;
border: 1px dashed #cor;
}


Explicando:
Quanto mais porcentagens voce por no efeito , mais movimentos ele terá .
0% é o primeiro movimento e assim por diante.
O código se repete 3 vezes para funcionar com as configurações corretas de cada navegador : o Opera Chrome e Firefox. o que voce por na primeira parte repita em todas.
Em nome voce pode colocar qualquer palavra (como flango >u< )
Não esqueça de repetir o nome do efeito em todas as indicações ;
Sempre cole o efeito antes de:  ]]></b:skin>  ou num gadget entre as tags : <style> </style>
Use px somente se for a propriedade Translate .

Para aplicar o efeito cole em um gadget html/js :

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

Desculpem o post grande , mas pra ficar bem entendido é assim mesmo q. Espero que consigam depois me mostem >u<  Qualquer dúvida ask