Can't parsing @keyframes, @-webkit-keyframes

[hil00137]

/* before parsed*/

@-webkit-keyframes load5 {
    0%,
    100% {
        box-shadow: 0em -2.6em 0em 0em #000000, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.5), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7);
    }
    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.7), 1.8em -1.8em 0 0em #000000, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5);
    }
    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.5), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7), 2.5em 0em 0 0em #000000, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
    }
    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5), 2.5em 0em 0 0em rgba(0, 0, 0, 0.7), 1.75em 1.75em 0 0em #000000, 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.5), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.7), 0em 2.5em 0 0em #000000, -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
    }
    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.5), 0em 2.5em 0 0em rgba(0, 0, 0, 0.7), -1.8em 1.8em 0 0em #000000, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
    }
    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.5), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.7), -2.6em 0em 0 0em #000000, -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
    }
    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.5), -2.6em 0em 0 0em rgba(0, 0, 0, 0.7), -1.8em -1.8em 0 0em #000000;
    }
}

@keyframes load5 {
    0%,
    100% {
        box-shadow: 0em -2.6em 0em 0em #000000, 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.5), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7);
    }
    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.7), 1.8em -1.8em 0 0em #000000, 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5);
    }
    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.5), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7), 2.5em 0em 0 0em #000000, 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
    }
    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5), 2.5em 0em 0 0em rgba(0, 0, 0, 0.7), 1.75em 1.75em 0 0em #000000, 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.5), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.7), 0em 2.5em 0 0em #000000, -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
    }
    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.5), 0em 2.5em 0 0em rgba(0, 0, 0, 0.7), -1.8em 1.8em 0 0em #000000, -2.6em 0em 0 0em rgba(0, 0, 0, 0.2), -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
    }
    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.5), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.7), -2.6em 0em 0 0em #000000, -1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2);
    }
    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0, 0, 0, 0.2), 1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2), 2.5em 0em 0 0em rgba(0, 0, 0, 0.2), 1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2), 0em 2.5em 0 0em rgba(0, 0, 0, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.5), -2.6em 0em 0 0em rgba(0, 0, 0, 0.7), -1.8em -1.8em 0 0em #000000;
    }
}

Those two css blocks are parsed as CSSUnknownRuleImpl.

/* after parsed */
@-webkit-keyframes load5 {
    0%,
    100% {
        box-shadow: 0ems -2.6ems 0ems 0ems #000000, 1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2), 2.5ems 0ems 0 0ems rgba(0, 0, 0, 0.2), 1.75ems 1.75ems 0 0ems rgba(0, 0, 0, 0.2), 0ems 2.5ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems 1.8ems 0 0ems rgba(0, 0, 0, 0.2), -2.6ems 0ems 0 0ems rgba(0, 0, 0, 0.5), -1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.7);
    }
    12.5% {
        box-shadow: 0ems -2.6ems 0ems 0ems rgba(0, 0, 0, 0.7), 1.8ems -1.8ems 0 0ems #000000, 2.5ems 0ems 0 0ems rgba(0, 0, 0, 0.2), 1.75ems 1.75ems 0 0ems rgba(0, 0, 0, 0.2), 0ems 2.5ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems 1.8ems 0 0ems rgba(0, 0, 0, 0.2), -2.6ems 0ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.5);
    }
    25% {
        box-shadow: 0ems -2.6ems 0ems 0ems rgba(0, 0, 0, 0.5), 1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.7), 2.5ems 0ems 0 0ems #000000, 1.75ems 1.75ems 0 0ems rgba(0, 0, 0, 0.2), 0ems 2.5ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems 1.8ems 0 0ems rgba(0, 0, 0, 0.2), -2.6ems 0ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2);
    }
    37.5% {
        box-shadow: 0ems -2.6ems 0ems 0ems rgba(0, 0, 0, 0.2), 1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.5), 2.5ems 0ems 0 0ems rgba(0, 0, 0, 0.7), 1.75ems 1.75ems 0 0ems #000000, 0ems 2.5ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems 1.8ems 0 0ems rgba(0, 0, 0, 0.2), -2.6ems 0ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0ems -2.6ems 0ems 0ems rgba(0, 0, 0, 0.2), 1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2), 2.5ems 0ems 0 0ems rgba(0, 0, 0, 0.5), 1.75ems 1.75ems 0 0ems rgba(0, 0, 0, 0.7), 0ems 2.5ems 0 0ems #000000, -1.8ems 1.8ems 0 0ems rgba(0, 0, 0, 0.2), -2.6ems 0ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2);
    }
    62.5% {
        box-shadow: 0ems -2.6ems 0ems 0ems rgba(0, 0, 0, 0.2), 1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2), 2.5ems 0ems 0 0ems rgba(0, 0, 0, 0.2), 1.75ems 1.75ems 0 0ems rgba(0, 0, 0, 0.5), 0ems 2.5ems 0 0ems rgba(0, 0, 0, 0.7), -1.8ems 1.8ems 0 0ems #000000, -2.6ems 0ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2);
    }
    75% {
        box-shadow: 0ems -2.6ems 0ems 0ems rgba(0, 0, 0, 0.2), 1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2), 2.5ems 0ems 0 0ems rgba(0, 0, 0, 0.2), 1.75ems 1.75ems 0 0ems rgba(0, 0, 0, 0.2), 0ems 2.5ems 0 0ems rgba(0, 0, 0, 0.5), -1.8ems 1.8ems 0 0ems rgba(0, 0, 0, 0.7), -2.6ems 0ems 0 0ems #000000, -1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2);
    }
    87.5% {
        box-shadow: 0ems -2.6ems 0ems 0ems rgba(0, 0, 0, 0.2), 1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2), 2.5ems 0ems 0 0ems rgba(0, 0, 0, 0.2), 1.75ems 1.75ems 0 0ems rgba(0, 0, 0, 0.2), 0ems 2.5ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems 1.8ems 0 0ems rgba(0, 0, 0, 0.5), -2.6ems 0ems 0 0ems rgba(0, 0, 0, 0.7), -1.8ems -1.8ems 0 0ems #000000;
    }
}
@keyframes load5 {
    0%,
    100% {
        box-shadow: 0ems -2.6ems 0ems 0ems #000000, 1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2), 2.5ems 0ems 0 0ems rgba(0, 0, 0, 0.2), 1.75ems 1.75ems 0 0ems rgba(0, 0, 0, 0.2), 0ems 2.5ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems 1.8ems 0 0ems rgba(0, 0, 0, 0.2), -2.6ems 0ems 0 0ems rgba(0, 0, 0, 0.5), -1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.7);
    }
    12.5% {
        box-shadow: 0ems -2.6ems 0ems 0ems rgba(0, 0, 0, 0.7), 1.8ems -1.8ems 0 0ems #000000, 2.5ems 0ems 0 0ems rgba(0, 0, 0, 0.2), 1.75ems 1.75ems 0 0ems rgba(0, 0, 0, 0.2), 0ems 2.5ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems 1.8ems 0 0ems rgba(0, 0, 0, 0.2), -2.6ems 0ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.5);
    }
    25% {
        box-shadow: 0ems -2.6ems 0ems 0ems rgba(0, 0, 0, 0.5), 1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.7), 2.5ems 0ems 0 0ems #000000, 1.75ems 1.75ems 0 0ems rgba(0, 0, 0, 0.2), 0ems 2.5ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems 1.8ems 0 0ems rgba(0, 0, 0, 0.2), -2.6ems 0ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2);
    }
    37.5% {
        box-shadow: 0ems -2.6ems 0ems 0ems rgba(0, 0, 0, 0.2), 1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.5), 2.5ems 0ems 0 0ems rgba(0, 0, 0, 0.7), 1.75ems 1.75ems 0 0ems #000000, 0ems 2.5ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems 1.8ems 0 0ems rgba(0, 0, 0, 0.2), -2.6ems 0ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0ems -2.6ems 0ems 0ems rgba(0, 0, 0, 0.2), 1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2), 2.5ems 0ems 0 0ems rgba(0, 0, 0, 0.5), 1.75ems 1.75ems 0 0ems rgba(0, 0, 0, 0.7), 0ems 2.5ems 0 0ems #000000, -1.8ems 1.8ems 0 0ems rgba(0, 0, 0, 0.2), -2.6ems 0ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2);
    }
    62.5% {
        box-shadow: 0ems -2.6ems 0ems 0ems rgba(0, 0, 0, 0.2), 1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2), 2.5ems 0ems 0 0ems rgba(0, 0, 0, 0.2), 1.75ems 1.75ems 0 0ems rgba(0, 0, 0, 0.5), 0ems 2.5ems 0 0ems rgba(0, 0, 0, 0.7), -1.8ems 1.8ems 0 0ems #000000, -2.6ems 0ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2);
    }
    75% {
        box-shadow: 0ems -2.6ems 0ems 0ems rgba(0, 0, 0, 0.2), 1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2), 2.5ems 0ems 0 0ems rgba(0, 0, 0, 0.2), 1.75ems 1.75ems 0 0ems rgba(0, 0, 0, 0.2), 0ems 2.5ems 0 0ems rgba(0, 0, 0, 0.5), -1.8ems 1.8ems 0 0ems rgba(0, 0, 0, 0.7), -2.6ems 0ems 0 0ems #000000, -1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2);
    }
    87.5% {
        box-shadow: 0ems -2.6ems 0ems 0ems rgba(0, 0, 0, 0.2), 1.8ems -1.8ems 0 0ems rgba(0, 0, 0, 0.2), 2.5ems 0ems 0 0ems rgba(0, 0, 0, 0.2), 1.75ems 1.75ems 0 0ems rgba(0, 0, 0, 0.2), 0ems 2.5ems 0 0ems rgba(0, 0, 0, 0.2), -1.8ems 1.8ems 0 0ems rgba(0, 0, 0, 0.5), -2.6ems 0ems 0 0ems rgba(0, 0, 0, 0.7), -1.8ems -1.8ems 0 0ems #000000;
    }
}

The real problem is that all 'em' are changed to 'ems'
So when I called toString() method, the css is different from the original css.

Help me How Can I Solved them.

[rbri]

Ups - there as a stupid typo in the skip code of the parser - thins is fixed.
Please try with the latest snapshot build

[rbri]

Thanks for noting this, this is also a problem in the original cssparser - have to fix it there also.

[hil00137]

Thanks for noting this, this is also a problem in the original cssparser - have to fix it there also.

Thanks for the quick fix!