Learn how the CSS@keyframes and animation properties work?

HTML-CSS
1

Tell us what’s happening: i want to know whats wrong. i even watched the video to verify but its not accepting.

Your code so far


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

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

@keyframes raindow {
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/80.0.3987.163 Safari/537.36.

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

Link to the challenge:

2

Hello there.

Do you have a question?

If so, please edit your post to include it in the Tell us what’s happening section.

The more information you give us, the more likely we are to be able to help.

3

what do the failing tests say?

4

The element with id of

rect

should have an

animation-name

property with a value of rainbow. The

@keyframes

rule should use the

animation-name

of rainbow. // tests completed

5

and what’s the animation-name of your #rect element?

6

the animation name given to #rect is rainbow

7

thank you,
I found my mistake!
I misspelled the word rainbow!