Hover keyframes text color change

Question

How to build an animation where :hover has an animation-name and duration with keyframes of text color changing?
0% (color: white)
50% (color: lightskyblue)
100% (color: darkblue)

Answer 1

CSS:

#text:hover{
animation:colorChange 3s ease-in;
}
@keyframes colorChange{
0%{color:#FF9933;}
33%{color:#000080;}
66%{color:#138808;}
100%{color:#FF9933;}
}

HTML:

<p id="text">TEXT</p>