Why is my CSS expecting a brace it seemingly doesn't need?

user_19027323 0
Viewed 48

I'm trying to get my sites CSS working and I'm getting some really strange validation error that I am not understanding.

Here is the 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
  }
}

Validation is telling me that there is an RBRACE missing at

-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

But I don't understand why it's expecting an RBRACE there. Do I just have code-brain and can't see my own mistake?

Please help! I've been staring at this problem for like a whole day now!

This same issue is happening at another point in my CSS here:

@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
  }
}

Every validator I run my entire CSS file through provides a missing RBRACE error at these lines in that snippet:

    -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);

But I genuinely don't understand why. I'm very confused and frustrated at my code. Please help!

Edit Involving Suggestion from Boldewyn:

I have changed the lines that a user below recommended involving missing semi-colons. The line now looks like this:

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
  }

Instead of this:

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
      }

However, my parser is now saying that there is missing RBRACEs at the first two lines of the code. So, I still have the same issue, just in a different place.

Also, as a note, W3C's CSS validator tells me that the CSS is all completely functional and valid. But CSSLint and other validators provide errors.

Here I will provide the entire problematic CSS file so that somebody may be able to better help me with this: animate.min.css

css
1 Answers

If you look closely at line 3 of your first example, you notice that some semicolons are missing. It should read

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

The missing semicolons are not obvious for some parsers. They reach simply for the first of their parsing instructions, that would make everything parsed up to that point valid, and that may well be an RBRACE.

Regarding your second example: I cannot spot any problem with it and neither can the CSS validator of the W3C: https://jigsaw.w3.org/css-validator/#validate_by_input

user_1131950
Related