"Learn How the CSS @keyframes and animation Properties Work" issue

HTML-CSS
1

Tell us what’s happening:
Not too sure what I’m missing. I had an issue in the past where an exercise didn’t work, and disabling my Japanese reader fixed it. Right now the reader is disabled, adblock is disabled, and zoom is at 100%. So maybe there is something in the code I’m overlooking.

The error I’m getting is " The @keyframes rule for rainbow should use a background-color of blue at 0%. The @keyframes rule for rainbow should use a background-color of green at 50%. The @keyframes rule for rainbow should use a background-color of yellow at 100%."

  **Your code so far**


<style>
div {
  height: 40px;
  width: 70%;
  background: black;
  margin: 50px auto;
  border-radius: 5px;
}

#rect {
  animation-name: rainbow;
  animation-duration: 4s;
}

@keyframes rainbow {
0% {
  background color: blue;
}
50% {
  background color: green;
}
100% {
  background color: yellow;
}
}


</style>
<div id="rect"></div>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:96.0) Gecko/20100101 Firefox/96.0

Challenge: Learn How the CSS @keyframes and animation Properties Work

Link to the challenge:

2

Hello @moeblob,

I confirm you that this time you are missing something into your code, not big deal but it changes everything. I am gonna show you which part gives you trouble:

@keyframes rainbow {
  0% {
    background color: blue;
  }
  50% {
    background color: green;
  }
  100% {
    background color: yellow;
  }
}

Do you see something wrong? Look the name of your properties and compare them with other properties who got many words inside. Hope you understand what I mean. :wink:

1 Like
3

Ohhh yeah, I figured it out, haha. Thanks for the hint!

1 Like
4

Happy that you arrived to figured it out! Good luck for the next challenges :wink:

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.