CSS多个不同的关闭/输出过渡

Question

想象一个白色的盒子。盒子可以根据情况变成蓝色或红色。我希望盒子慢慢地从蓝色变回白色，但它应该从红色快速变回白色。我如何实现这一点，因为当它变回白色时，box-transition 似乎适用于两个淡入淡出。

我最近做了很多关于 CSS 过渡的搜索和阅读。我现在知道如何在两种状态之间进行不同的元素转换，例如快速从状态 A 到 B，然后慢慢从状态 B 回到 A。

但是，有没有一种方便的方式来编写 CSS，以便元素始终以相同的方式从 A 过渡到 B，但以 多种 方式从 B 过渡到 A。例如说我想要以多种不同的方式从 :hover 返回到基本状态，可能第一次快，下一次慢，第三次我将鼠标悬停在一个元素上时甚至更慢。

和往常一样：仅使用 CSS 可以做到这一点吗？

谢谢

Answer 1

实际上，您需要在悬停状态上设置转换，然后立即返回。

div.a{
width:200px;
height:200px;
background: blue;
margin-bottom:10px;
}
div.a:hover{
background: red;
transition: all 1s;
} 

这是理解https://jsfiddle.net/waf745hf/的小提琴