CSS validation: “Parse Error: @keyframes”

问题

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;} 
  } 

回答1:

As @BoltClock said, it seems just IE doesn't recognize @keyframes inside @media rules, so you could create two different @keyframes and change the animation-name CSS property inside the @media.
Here's an example:

@keyframes line_draw { /* This is for when the media is not matched. */
    100% {
        width: 100vh;
    }
}

@keyframes line_draw2 {
    100% {
        width: 100vh;
    }
}

#yourElement {
    animation: line_draw 2s;
}

@media screen and (min-width: 900px) {

    #yourElement {
        animation-name: line_draw_2;
    }
}

回答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.

来源：https://stackoverflow.com/questions/48192237/css-validation-parse-error-keyframes