在 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

Answer 2

您可以为此使用关键帧：

.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>

这是通过在元素悬停时添加关键帧序列来实现的，而不是在实际元素创建期间添加（因此关键帧仅在悬停阶段起作用）。

使用 forwards 声明以便动画将在“100%”关键帧上 'pause'，而不是循环返回并 'finishing where it started'。 IE。第一个关键帧。

请注意：需要包含其他前缀see here for more info。

Answer 3

或者，如果您不习惯使用 @keyframes（虽然我不明白为什么不），您可以使用伪元素作为中间色。您需要做的就是使用 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>

在 CSS 中使用悬停过渡时是否可以过渡到第三种颜色？

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

css

animation

keyframe