关键帧的 css3 验证错误

Question

我有一个问题，在 css 中使用 @keyframes 并在 css3 验证中检查它是否显示错误 "Sorry, the at-rule @-webkit-keyframes is not implemented" 像这样.我想我是否需要添加像 css 这样的预声明。因为我不熟悉使用关键帧创建动画。谁能告诉我详情吗？

我的代码是，

@-webkit-keyframes roll{
    0% {-webkit-transform: translateX(500px) rotate(360deg);}
    100% {-webkit-transform: translateX(0px) rotate(0deg);}
}
@-moz-keyframes roll{
    0% {-moz-transform: translateX(500px) rotate(360deg); opacity: 0;}
    100% {-moz-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-o-keyframes roll{
    0% {-o-transform: translateX(500px) rotate(360deg); opacity: 0;}
    100% {-o-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-ms-keyframes roll{
    0% {-ms-transform: translateX(500px) rotate(360deg); opacity: 0;}
    100% {-ms-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@keyframes roll{
    0% {transform: translateX(500px) rotate(360deg); opacity: 0;}
    100% {transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-webkit-keyframes moveUp{
    0% {-webkit-transform: translateY(40px);}
    100% {-webkit-transform: translateY(0px);}
}
@-moz-keyframes moveUp{
    0% {-moz-transform: translateY(40px);}
    100% {-moz-transform: translateY(0px);}
}
@-o-keyframes moveUp{
    0% {-o-transform: translateY(40px);}
    100% {-o-transform: translateY(0px);}
}
@-ms-keyframes moveUp{
    0% {-ms-transform: translateY(40px);}
    100% {-ms-transform: translateY(0px);}
}
@keyframes moveUp{
    0% {transform: translateY(40px);}
    100% {transform: translateY(0px);}
}

Answer 1

供应商特定的前缀不是 W3C 规范的一部分。这就是为什么 @keyframes 有效而 @-moz-keyframes 和 @-webkit-keyframes 无效的原因。

在这种情况下，忽略这些警告是安全的，但一般来说，验证器在开发跨浏览器应用程序时非常有用。

使用 CSS 扩展语言(例如 SASS)可能会对您有所帮助或 LESS (如果您还没有使用它)在一些框架的帮助下，可以为您处理供应商前缀。