@keyframes rainbow

HTML-CSS
1

I can’t get past "Learn How the CSS @keyframes and animation Properties Work"
I followed all the instructions and even checked hints and watched a video on this challenge, I got everything right but for some reason it says my @keyframes part of the code is wrong and I don’t understand how.

  **<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 {
  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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.88 Safari/537.36

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

Link to the challenge:

2

You forgot to add curly brackets {} for @keyframes like
@keyframes rainbow {
0%{
background-color: blue;
}
50%{
background-color: green;
}
100%{
background-color: yellow;
}
}
I hope this will solve you proplem

1 Like
3

Got it, thank you so much!

4

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