Modify Fill Mode of Animation

**Tell us what’s happening:**I have understood everything here but one doubt I have is, why can’t we just use only ‘hover’. No animations required. won’t that work the way animation-fill-mode : forwards is doing?

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;
    animation-fill-mode: forwards;
    /* add your code below this line */
    
    /* 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 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36.

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

Usually a simple animation like changing a background like this doesn’t really need animations as the same can be done with transitions. This exercise is just introducing you to the basics of animation to you.

My website is on WordPress, I have added too many plugins to on my website to generate leads for canon customer service, It looks fine in the laptop, But when I open it one mobile phone its look meshy. Is there any way that on a mobile phone it looks less messy or some of the plugin not work.