为什么我的 CSS 期待一个它似乎不需要的大括号？

Question

我正在努力让我的网站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在那里。我只是有代码头脑，看不出自己的错误吗？

请帮忙！我已经盯着这个问题看了一整天了！

同样的问题也发生在我的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);

但我真的不明白为什么。我对自己的代码感到非常困惑和沮丧。请帮忙！

编辑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
}

然而，我的解析器现在说，在代码的前两行缺少RBRACE。所以，我仍然有同样的问题，只是在不同的地方。

另外，W3C的CSS验证程序告诉我CSS是完全有效的。但是CSSLint和其他验证器会提供错误。

在这里，我将提供整个有问题的CSS文件，以便有人能够更好地帮助我：animate.min.CSS

Answer 1

如果仔细查看第一个示例的第3行，就会发现缺少了一些分号。它应该读取

-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。

关于你的第二个例子：我找不到任何问题，W3C的CSS验证器也找不到：https://jigsaw.w3.org/css-validator/#validate_by_input