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

另外，如果你不能使用@keyframes（虽然我不明白为什么不这样做），你可以使用伪元素作为中间颜色。您需要做的就是使用transition-delay来控制转换的延迟：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以使用关键帧：

.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％”关键帧上“暂停”，而不是循环返回并“完成开始的位置”。即第一个关键帧。

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

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

3 个答案: