Learn How the CSS @keyframes and animation Properties Works

Learn How the CSS @keyframes and animation Properties Works
0

Tell us what’s happening:
it can’t be submitted. it said the key frame is uncorrect. but i don’t know how.

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;
    
  }
  @keyframe rainbow {0%{background:blue;}}50%{bakground:green;}100%{background: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/74.0.3729.157 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work

Make sure to format your keyframe, it’s very difficult to read.

Two errors I see,

it’s keyframes.
use background-color instead of background.

got it! thank you for answering.