CSS 验证 : "Parse Error: @keyframes"

Question

当我尝试验证我的网站时，W3C CSS 验证器提示解析错误。我真的很想了解我做错了什么，但我真的需要一些帮助。

这是验证器所说的:

Parse Error: @keyframes line_draw{ 100%{ width: 100vh; } }

这是文件中的代码:

@media screen and (min-width: 900px) { 
  @keyframes line_draw{ 
    100%{ width: 100vh;} 
  } 

Answer 1

正如@BoltClock 所说，IE 似乎无法识别@media 规则中的@keyframes。但是您可以只创建两个不同的 @keyframes 并更改 @media 规则内的 animation-name 属性，如下所示:

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