Question

我遇到一个问题，即在css中使用@keyframes并在css3验证中检查它是否显示错误"Sorry, the at-rule @-webkit-keyframes is not implemented"。我想我是否需要像css一样添加pre声明。因为我是新手使用关键帧创建动画。有谁可以请我提供详细信息？

我的代码是，

@-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（如果您还没有使用）可能会有所帮助，在某些框架的帮助下，可以处理供应商你的前缀。

关键帧的css3验证错误

1 个答案: