css - CSS验证:“解析错误:@keyframes”

当我尝试验证我的网站时，W3C CSS验证器显示解析错误。我确实试图了解自己做错了什么，但我确实需要一些帮助。

验证者是这样说的：


  解析错误：@keyframes line_draw{ 100%{ width: 100vh; } }


这是文件中的代码：

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

最佳答案

正如@BoltClock所说，似乎IE无法识别@keyframes规则内的@media，因此您可以创建两个不同的@keyframes并更改animation-name内的@media CSS属性。
这是一个例子：

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

关于css - CSS验证:“解析错误:@keyframes”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48192237/