Applied visual design confusion

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Hi,

I was wondering if we were to use animation-fill-mode: forwards;, why do we still need animation-duration: 500ms;?

Thanks, :sunny: 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;
  /* Only change code below this line */
 animation-fill-mode: forwards;
  /* Only change code above this line */
}
@keyframes background-color {
  100% {
    background-color: #4791d0;
  }
}
</style>
<button>Register</button>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36.

Challenge: Modify Fill Mode of an Animation

Link to the challenge:

2

The duration and fill mode are not mutually exclusive in any way. Just because you want the animation to keep the values of the last keyframe (i.e. forwards) doesn’t mean you do not also want to control the duration of the animation.

3

thanks! got it now !!

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.