The @keyframes rule should use the animation-name of rainbow

[517surya]

Solution

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; } }