CSS验证:“解析错误:@keyframes" [英] CSS validation: "Parse Error: @keyframes"

问题描述

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

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.

这就是验证者所说的:

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

这是文件中的代码:

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

推荐答案

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

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

这篇关于CSS验证:“解析错误:@keyframes"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！