Modify Fill Mode of an Animation

Tell us what’s happening:

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;
    animation-duration: 500ms;
    /* add your code below this line */
    animation-fill-mode:frowards;
    /* add your code above this line */
  }
  @keyframes background-color {
    100% {
      background-color: #4791d0;
    }
  }
</style>
<button>Register</button>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.79 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation

Please specify a question in order to get a reasonable response from the forum contributors.

Hi @keepnoz,

Your code is right, but, sometimes browser doesn’t support that, so, try to use another browser like Chrome or Firefox.

also, try to clear cash in your browser and refresh page and write a solution again, if you stuck here is the solution:

animation-fill-mode:frowards;

Hope this help you my friend, good luck and have a happy coding.

Regards,
Ali Mosaad

1 Like

@keepnoz Check the spelling frowards your spelling is wrong.