para que entiendas la situación del por qué no te funciona el código.
Código:
<style type="text/css">
@-webkit-keyframes some{
0%{color: black;}
100%{color:white;}
}
p{
-webkit-animation: some 1s infinite;
}
</style>
en esta captura representa el objeto jerarquico del código anterior. nótese el primer índice de la colección cssRules y comparalo con el segundo índice. en particular, son objetos distintos: el primero es un objeto CSSKeyframesRule y el segundo un objeto CSSStyleRule. incluso los prototipos son distintos (fondo rojo). desconozco si es la forma estandarizada pero aparentemente cuando la regla se compone de un arroba el DOM no crea un objeto CSSStyleRule como sucede con los selectores normales. en cambio, genera un objeto similar a CSSStyleSheet donde el prototipo se parece, es decir tiene los métodos insertRule y deleteRule. (en la captura no se muestra el prototipo de un CSSStyleSheet.) en fin, tienes que adaptar el código para que determine si la regla en que actualmente esta iterando es un objeto CSSStyleRule o uno más complejo como CSSKeyframesRule.