Why use modify-fill-animation on hover state to change background color?

So going through the responsive design course at the moment. I’m at the part learning about modify-fill-mode. It’s used to change the background-color in hover state. My question is this. Is there an advantage to use modify-fill-mode on an animation for the hover vs using background-color for hover (see example below)? Is one faster, or more practiced, than the other?

button:hover {
animation-name: background-color;
animation-duration: 500ms;
animation-fill-mode: forwards;
}
@keyframes background-color {
100% {
background-color: #4791d0;
}
}

button:hover {
background-color: #4791d0;
}

Hi, practically button:hover state is more used and is more compact in real world, I think the main reason the course uses keyframes to demonstrate bg color change on hover is because to keep it simple and easy to grasp for beginners but i dont see the use of using keyframes for hover states

Thanks for your input. I figured it was a beginner lesson. Just wasn’t sure if it was really used in the real world, and if so which would be more practical approach.

1 Like