Tengo un elemento que es rojo en estado de reposo y verde cuando el usuario pasa el cursor sobre él. Lo tengo configurado para facilitar la transición para0.4s.

En lugar de tener la transición de color directamente del rojo al verde, me gustaría que pasara por el amarillo en el punto medio. Entonces, cuando el usuario pasa el mouse sobre él, pasa de rojo a amarillo a verde en una transición suave. es posible?

Este es mi código actual.

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