Modify Fill Mode of Animation

HTML-CSS
1

**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

2

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.

3

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.