(video) @keyframes pass test but doesn't work

Images are better than words sometimes, so I thought a video might work as well.

As you can see, there’s no animation starting on the right. This is most probably not coming from the browser (Chrome), as some previous animations using @keyframes from the penguins test worked perfectly. So, is it a bug or is there something I’m missing? From the code written, the test passes perfectly, but what’s the point of passing the test if I don’t understand the code?

Thanks for any answers!


Ok, so I’ll be the one to answer my own question :sweat_smile:

Misplaced “}” sign which I thought was supposed to include the @keyframes block but was actually closing before it was stated, like this :

 #rect {
    animation-name: rainbow;
    animation-duration: 4s;
    @keyframes rainbow {
      0% {
        background-color: blue;
      50% {
        background-color: green;
      100% {
        background-color: yellow;

I’m dumb.

I just thought I’d let it there rather than suppress it, as it might be interesting to others or for more precision about the @keyframes test.