How do I make background change smooth color change??

Question

I want the background color to change smoothly not directly.....help me

https://code.sololearn.com/WlJ0kxvfCL1e/?ref=app

Answer 1

Make use of keyframes.

.info:hover{
animation:change 3s linear forwards;
}

@keyframes change{
from{background-color:aqua;}
to{background-color:yellow;}
};

Answer 2

Thanks Abhay

Answer 3

you could also limit transition to background or even background-color property (default apply to all animatable properties):

transition: background 3s;

Answer 4

addd this

.info:hover{
animation:change 1s linear forwards;
transition:color 0.3s ease , background 0.8s ease;
}