Solution For Learn How the CSS @keyframes and animation Properties Work

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

Do you have a question?

There is no question. He is just posting the solution, as he is here. I’d suggest locking this thread.

And another solution he posted here

You can post solutions that invite discussion (like asking how the solution works, or asking about certain parts of the solution). But please don’t just post your solution for the sake of sharing it.

We have set your post to unlisted. Thanks for your understanding.