Tutorial - Efeito YET

Olá pessoas!

Me perdoem por ter postado agora tão tarde, é que fiquei sem tempo. E hoje o dia também não foi muito produtivo.

Vou explicar: o meu melhor amigo, o Lucas, está agindo totalmente estranho, quero dizer, mais estranho que o normal. Eu peço uma caneta emprestada, ele abraça o estojo e fala que não vai me emprestar. Eu pergunto por que, e ele só faz um barulho estranho com a boca, algo com Pop! e não fala mais nada. Quando pergunto o que eu fiz, ele só fala; "Para de me encher o saco e vira pra frente, Nathália!" (5 anos na mesma sala e sentando junto o ano inteiro e eu ainda espero que ele me chame de Nath algum dia). Aí eu tento me desculpar por sei-lá-o-que-eu-fiz e ele começa a gritar. Qualé, eu já vi a calça dele rasgada quando a gente tinha 8 anos e ele não consegue nem me dizer que merda que tá acontecendo?! Hoje na saída tentei arrancar alguma coisa dele e ele disse que não é nada, que tá me tratando como sempre tratou, ou seja, sendo como sempre grosso. Sim, ele sempre foi grosso, mas é um grosso meio amigável, até porque ele teve uma queda por mim quando a gente tinha 9 anos, mas passou. Agora é um grosso frio. O piro é que é só comigo. Com o Kevin ele fala, com o Pedro ele fala, com a Bruna ele fala. A criatura fala direito até com a Tutu! Vou descobri o que esse moleque tá me escondendo!

Falando de coisa boa... eu criei meu primeiro efeito! Se chama efeito Yet (não liguem para o nome, tô sem criatividade e muito absorvida com o Caso Lucas) e eu achei que ficou fofo. (Preview)

Se interessou? Então, vamos!

Procure por [[</b:skin> e cole acima dessa tag o código abaixo:

@-webkit-keyframes YET {
50% {-webkit-transform: scale(1);}
100% {-webkit-transform: scale(8.8);}
10% {-webkit-transform: translatey(-1px);}
55% {-webkit-transform: translatey(-6px);}
100% {-webkit-transform: translatey(-10px);}
}
@-moz-keyframes YET {
50% {-webkit-transform: scale(1);}
100% {-webkit-transform: scale(1.7);}
10% {-webkit-transform: translatey(-1px);}
55% {-webkit-transform: translatey(-6px);}
100% {-webkit-transform: translatey(-10px);}
}
@-o-keyframes YET {
50% {-webkit-transform: scale(1);}
100% {-webkit-transform: scale(1.7);}
10% {-webkit-transform: translatey(-1px);}
55% {-webkit-transform: translatey(-6px);}
100% {-webkit-transform: translatey(-10px);}
}
.YET {
-webkit-transition: .90s;
border-radius: 30px;
-webkit-filter: sepia(100%);
}
.YET:hover {
-webkit-filter: sepia(40%);
border-radius: 30px;
-webkit-animation: YET .90s alternate infinite linear;
}

Não altere absolutamente NADA. Nada vezes nada. Aonde quiser que apareça, cole esse código:

<center><a href="Link"><img class="YET" src="Link da imagem" /></a></center>

Altere o necessário e pronto! Espero que tenham gostado!

PS: Alguém me dá uma dica de persuadir o Lucas a me contar que droga tá acontecendo?!