How do I add an animation duration?

In the lessons of the syllabus it told me to do it like this:

background-color: #4791d0;
animation-name: background-color;	
animation-duration: 1s;

But it wasn’t working when I added it to my project so I checked the code from the one I’m meant to be replicating (created by FCC) and they typed it like this:

background-color: orange;
transition: background-color 1s;

Can someone tell me what’s wrong with the first version? (Just to clarify: the color does change to the one I want, it’s just the animation duration that’s not working)

which challenge are you doing? if you give me the link, I might be able to help you.

1 Like

The problem is that in the first version you’re using an animation (ie there should be a matching @keyframes rule called background-color that has been defined), second version is a transition, they’re not the same thing at all. A transition animates a given CSS property over a given time.

2 Likes