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 of having the colour transition straight from red to green, I'd like it to pass through yellow at the midway point. So when the user mouses over it, it goes from red to yellow to green in one smooth transition. Is this possible?

This is my current code.

.element {
    background-color: red;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.element:hover {
    background-color: green;
}

Answer 1

you could use keyframes for this:

.element {
  background-color: red;
  height: 300px;
  width: 300px;
}
.element:hover {  
  -webkit-animation: changeColor 0.4s forwards;
  animation: changeColor 0.4s forwards;
}

@-webkit-keyframes changeColor{
  0%{background: red;}
  50%{background:yellow}
  100%{background:green}
  }
@keyframes changeColor{
  0%{background: red;}
  50%{background:yellow}
  100%{background:green}
  }

<div class="element"></div>

---

This works by adding the keyframe sequence when the element is hovered, and not during the actual element's creation (so the keyframes only work during the hovered stage).

The forwards declaration is used so that the animation will 'pause' on the '100%' keyframe, rather than looping back and 'finishing where it started'. I.e. the first keyframe.

---

Please note: Other prefixes will need to be included see here for more info.

Answer 2

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

Answer 3

Alteratively, if you're not up to using @keyframes (although I don't see why not), you can use pseudo elements to act as the middle color. All you need to do is control the delay of the transitions using transition-delay:

.element {
    width: 100px;
    height: 100px;
    background-color: red;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    position: relative;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.element:before {
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    background: green;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    opacity: 0;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.element:hover:before {
    opacity: 1;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.element:hover {
    background-color: yellow;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

<div class="element"></div>