Animacion que no funciona en Chrome

[nanotime]

Cree una animación (bastante torpe) para una demostración basica de la página que estoy haciendo. Ella funciona bastante bien pero tengo dos problemas.

El primero es que, aunque funciona en Firefox y en Opera (no he probado en IE ni en Safari porque uso Linux y no he virtualizado nada aún), no funciona en Chrome por mas que use los prefijos correspondientes.

El segundo es que no quiero que se ejecute a cada rato, por ahora solo cuando se le pase el mouse por encima, cosa que con :hover debería llevarse sin problema, pero no es así, no se usar bien esa propiedad y en los intentos que he hecho la animación o deja de funcionar o simplemente desaparece dependiendo de como use hover.

Los códigos son:

HTML https://gist.github.com/nanotime/5016236

CSS https://gist.github.com/nanotime/5016223

Gracias por la ayuda

[pzin]

Mirando por encima, tienes que especificar los prefijos propietarios para @keyframes.

Código CSS:

@-webkit-keyframes {
  ...
}
 

[alex_dh]

busca algo sobre los prefijos:

-webkit- (para chrome y safari, creo que opera se paso tambien)
-moz- (para mozilla)
-o- (para opera)