@keyframes and animation Properties Work

dont know how to this code plzz… help me

Your code so far

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

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

@keyframes {
background-color: blue;

<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/81.0.4044.129 Safari/537.36.

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

Link to the challenge:


Take a look at the example on the left side of the challenge page. Use that example to help you write the code that follows the test instructions on the bottom of the challenge page.

Done… but @keyframe portion i cant do

Let’s look at the example:

@keyframes colorful {
  0% {
    background-color: blue;
  100% {
    background-color: yellow;

The @keyframes does the following:
colorful is the animation name, which can be referenced by the object you want to animate.
0% {background-color: blue} tells the animation object to start with a blue background.
100% {background-color: yellow} tells the animation object to end with a yellow background.
The code will automatically transition from 0% to 100%.