Css Transition e Links

Eu descobri a pouco tempo que o css sozinho é capas de criar algumas animações bem interessantes. Uma delas eu coloquei nos links das tags. Se você usa o IE nem deve ter notado, mas se usa o Safari ou Chrome deve ter achado o máximo, como eu =D. Se vc curtiu eu dou a barbada de como criar.

.cpojer-links a {
 display: inline-block;
 padding: 4px;
 outline: 0;
 color: #3a599d;
 -webkit-transition-duration: 0.25s;
 -moz-transition-duration: 0.25s;
 -o-transition-duration: 0.25s;
 transition-duration: 0.25s;
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 -o-transition-property: -o-transform;
 transition-property: transform;
 -webkit-transform: scale(1) rotate(0);
 -moz-transform: scale(1) rotate(0);
 -o-transform: scale(1) rotate(0);
 transform: scale(1) rotate(0);
}
.cpojer-links a:hover {
 background: #3a599d;
 text-decoration: none;
 color: #fff;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 -o-border-radius: 4px;
 border-radius: 4px;
 -webkit-transform: scale(1.05) rotate(-1deg);
 -moz-transform: scale(1.05) rotate(-1deg);
 -o-transform: scale(1.05) rotate(-1deg);
 transform: scale(1.05) rotate(-1deg);
}
.cpojer-links a:nth-child(2n):hover {
        -webkit-transform: scale(1.05) rotate(1deg);
        -moz-transform: scale(1.05) rotate(1deg);
        -o-transform: scale(1.05) rotate(1deg);
        transform: scale(1.05) rotate(1deg);
}

Esse é todo o código que vc vai precisar. Talvez vc vai querer um container diferente pra tag <a>. Mas tenho certeza que vc consegue ajeitar o seu html e esse css sem problemas pra fechar com a sua necessidade.

Essa animação, infelizmente só roda hoje no chrome, safari e opera. O Firefox não roda as transições, mas o transform sozinho já da um efeito bem agradável. Nas novas versões beta do FF e IE (4 e 9 respectivamente) a transição já funciona. Então é implementar e esperar pelo futuro preparado =D.

[Christoph Pojer via David Walsh]