Applied Visual Design - Use CSS Animation to Change the Hover State of a Button

[jimsterhq]

Tell us what’s happening:
Describe your issue in detail here.
Hi, this is claimed to be correct and passes the test but I am wanting to know why the code does not work on the site nor taken and tried elsewhere. I see other posts with the answer but it is an answer with a flaw in reality that it doesn’t animate. It does in Opera but not google or Edge or on this site itself running from Edge.
Your code so far

button { border-radius: 5px; color: white; background-color: #0F5897; padding: 5px 10px 8px 10px; } } button:hover { animation-name: background-color; animation-duration: 500ms; } @keyframes background-color{ 100%{ background-color: #4791d0; } }

Register

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

  }
  button:hover {
    animation-name: background-color;
    animation-duration: 500ms;
   }   
    @keyframes  background-color{
    100%{
      background-color: #4791d0;
      }
  }
  
 
</style>

<button>Register</button>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36 Edg/111.0.1661.54

Challenge: Applied Visual Design - Use CSS Animation to Change the Hover State of a Button

Link to the challenge:

freeCodeCamp.org

[DobarBREND]

Welcome to our community!

The @keyframes rule works perfectly:

Copy/paste the code snippet into the codepen and see for yourself.
I am using Chrome browser.

[jimsterhq]

Thanks, it woke up and started working. I don’t know why it refused to start with or forget more likely I suppose what I had put in incorrectly. However it just seems like sometimes the entire stack of servers have to catch up with you and reregister your progress in the human race.

[dmm2321]