I can't seem to get passed this stage I can't figure out how to add/ complete this @keyframes

HTML-CSS
1

Your code so far


<style>
button {
  border-radius: 5px;
  color: white;
  background-color: #0F5897;
  padding: 5px 10px 8px 10px;
}

button:hover {
  animation-name: background-color #4791d0;
  animation-duration: 500ms;
}

@keyframes
100% {background-color #4791d0;}

</style>

<button class'background-color'>Register</button>

**Link to the challenge:**
https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button
2

You missed the part where you describe your problem and what you have tried :slight_smile:

3

Look closely at the example in the left panel. Notice that the @keyframes rule is given a name (width) and then that name is used for the animation-name property in the img:hover rule. In the right panel, the animation-name property already has the name set for you, so you just have to set the @keyframes rule to that name. And then make sure you remember all of your curly braces.