CSS validation: "Parse Error: #keyframes" - css

Question

When I tried to validate my website, the W3C CSS Validator says parse error. I really tried to understand what I had done wrong but I could really need some help.
This is what the validator says:
Parse Error: #keyframes line_draw{ 100%{ width: 100vh; } }
And this is the code in the file:
#media screen and (min-width: 900px) {
#keyframes line_draw{
100%{ width: 100vh;}
}

Answer 1

As #BoltClock said, it seems like IE just doesn't recognize #keyframes inside #media rules. But you can just create two different #keyframes and change the animation-name property inside a #media rule, as follows:
#keyframes line_draw {
100% {
width: 100vh;
}
}
#keyframes line_draw_smaller_screen {
100% {
width: 100vh;
}
}
#yourElement {
animation: line_draw 2s;
}
#media screen and (min-width: 900px) {
#yourElement {
animation-name: line_draw_smaller_screen;
}
}

Answer 2

Looks like the validator doesn't recognize #keyframes rules in #media rules. The spec allows this, and it clearly works on all browsers.
If the parse error bothers you enough (for example because you need to validate often and it keeps getting in the way), you can work around this by swapping animation-names instead of keyframe rules in your #media rules, which also resolves the issue of Internet Explorer not supporting #keyframes rules nested in #media rules anyway.