我试图让我的网站CSS工作,我得到了一些非常奇怪的验证错误,我不理解.
以下是CSS:
@-webkit-keyframes flip {
0% {
-webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn) transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn) -webkit-animation-timing-function: ease-out animation-timing-function: ease-out
}
40% {
-webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out
}
50% {
-webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
80% {
-webkit-transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg);
transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
to {
-webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
}
验证是告诉我,有一个RBRACE在
-webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn) transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn) -webkit-animation-timing-function: ease-out animation-timing-function: ease-out
但我不明白为什么会有RBRACE.难道我只是有代 docker 脑,看不到自己的错误吗?
请帮忙!我已经盯着这个问题看了一整天了!
同样的问题也发生在我的CSS中的另一个地方:
@keyframes flip {
0% {
-webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out
}
40% {
-webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out
}
50% {
-webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
80% {
-webkit-transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg);
transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
to {
-webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}
}
我运行整个CSS文件的每个验证器都会在该代码段的以下几行中提供一个缺失的RBRACE错误:
-webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
但我真的不明白为什么.我对我的代码感到困惑和沮丧.请帮忙!
Edit Involving Suggestion from Boldewyn:
我已经更改了下面一位用户推荐的涉及缺少分号的行.这条线现在看起来像这样:
0% {
-webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out
}
而不是这个:
0% {
-webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn) transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn) -webkit-animation-timing-function: ease-out animation-timing-function: ease-out
}
然而,我的解析器现在说,在代码的前两行缺少RBRACEs.所以,我仍然有同样的问题,只是在不同的地方.
另外,值得注意的是,W3C的CSS验证程序告诉我,CSS是完全功能和有效的.但是CSSLint和其他验证器提供了错误.
在这里,我将提供整个有问题的CSS文件,以便有人能够更好地帮助我:animate.min.css