我试图让我的网站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

推荐答案

如果仔细查看第一个示例的第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:https://jigsaw.w3.org/css-validator/#validate_by_input的CSS验证程序也不能

Css相关问答推荐

Css-如何隐藏WP管理菜单上没有css类的第4<;li&>

如何在react 路由中设置活动类?

如何使用 Cypress 从 React 下拉列表中进行 Select

如何在 VS Code 中获得 JavaFX CSS 属性的自动完成功能?

Tailwind CSS: Select 单选按钮时不应用同行判断的边框

SASS 中的计算表达式

使用 Webpack5 在 CSS 文件中内联字体和图像?

从 Angular SCSS 生成 CSS?

CSS Stepper - LI After Overlaying LI Before

使用 MUI 动态绘制多个边框

在样式化组件中使图像重叠

使用css水平+垂直翻转/镜像图像

如何从 表格单元格中创建链接

如何在没有填充区域的情况下背景化 div

如何在 Flexbox 中禁用等高列?

Sass 无效的 CSS 错误:预期的表达式

为什么浏览器会为 CSS 属性创建供应商前缀?

名称-值对的语义和 struct

@font-face src: local - 如果用户已经拥有本地字体,如何使用它?

对象拟合不影响图像