使用悬停过渡时，CSS 是不是可以通过第三种颜色进行过渡？

Posted 2023-03-06

【中文标题】使用悬停过渡时，CSS 是不是可以通过第三种颜色进行过渡？

【英文标题】：Is it possible in CSS to transition through a third color when using a hover transition?使用悬停过渡时，CSS 是否可以通过第三种颜色进行过渡？

【发布时间】：2015-06-16 08:45:17

【问题描述】：

我有一个元素在静止状态下是红色的，当用户将光标悬停在它上面时是绿色的。我已将其设置为简化 0.4s 的过渡。

我希望它在中间点通过黄色，而不是直接从红色过渡到绿色。因此，当用户将鼠标悬停在它上面时，它会从红色到黄色再到绿色的平滑过渡。这可能吗？

这是我当前的代码。

.element 
    background-color: red;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;

.element:hover 
    background-color: green;

【参考方案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 值以控制动画运行的速度。

这是一个使用-webkit-animation 和@-webkit-keyframes 的Chrome 示例：

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

【参考方案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%”关键帧处“暂停”，而不是循环返回并“在开始处结束”。 IE。第一个关键帧。

---

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

【参考方案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>

【讨论】：

这其实很聪明：P +1