在使用悬停过渡时,CSS是否可以转换为第三种颜色？

Question

我有一个静止状态为红色的元素,当用户将光标悬停在其上时为绿色.我已经设置了缓解过渡0.4s.

我不希望颜色直接从红色变为绿色,而是希望它在中途点穿过黄色.因此,当用户将鼠标悬停在它上面时,它会在一个平滑过渡中从红色变为黄色变为绿色.这可能吗？

这是我目前的代码.

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

Answer 1

您可以使用CSS @keyframes动画语法.

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

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

更改0.4s值以控制动画的运行速度.

以下是Chrome使用-webkit-animation和的示例@-webkit-keyframes:

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

确保你涵盖所有的浏览器可能因为语法是不同的Chrome,Firefox,Internet Explorer和Opera.

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

下面是在CSS3配置您的动画的更多信息,你可以控制的东西,如animation-delay,animation-direction和许多.

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