Is it possible in CSS to transition through a third color when using a hover transition?

Question

I have an element that is red in resting state, and green when the user hovers their cursor over it. I have it set to ease the transition for 0.4s.

Instead

Answer 1

You can use the CSS @keyframes animation syntax.

@keyframes animate-color {
  0%   { color: red; }
  50%   { color: yellow; }
  100% { color: green; }
}

element:hover {
   animation: animate-color 0.4s forwards; 
}

Change the 0.4s value to control how fast the animation runs.

Here's an example for Chrome using -webkit-animation and @-webkit-keyframes:

https://jsfiddle.net/ahm2u8z2/1/

Make sure you cover all browser possibilities as the syntax is different for Chrome, Firefox, Internet Explorer and Opera.

https://css-tricks.com/snippets/css/keyframe-animation-syntax/

Here's more information for configuring your animations in CSS3, you can control things such as animation-delay, animation-direction, and many more.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations