Https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation

HTML-CSS
1

I am currently learning modify fill mode of an animation.[https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation]

Out of curiosity, may i know if
button:hover{
background-color:blue;
}
works the same with the one in the link? Any differences between these two?

2

I don’t quite understand what you’re asking. Can you give more context?

3

In the link, the challenge asks me to use this code below to make the button stays highlighted when a user hovers over it.
button:hover {

animation-name: background-color;

animation-duration: 500ms;

animation-fill-mode:forwards;

}

@keyframes background-color {

100% {

  background-color: #4791d0;

}

}
So i wonder if
button:hover{
background-color:blue;
}
this code works the same as above? Any differences between these two?

4

If you write two elements, each with the different style rules, I think you’ll see the difference. Besides the fact that #4791d0 is not the same color as blue, one has a transition animation and the other doesn’t. You can emphasise this more if you increase the animation-duration time.

5

I see! Thank you very muchh!

6

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