悬停在外时，两个不同元素的转换延迟反转

Question

我需要一个悬停序列是ABBA而不是ABAB的转换。

这是我制作的一把小提琴来演示：

https://jsfiddle.net/m8vrLtx7/1/

这是代码：

div{
height: 10rem;
width: 10rem;
background: red;
border-radius: 100%;
margin: 3rem;
position: relative;
}
div:before,
div:after{
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 100%;
transform: scale(0);
transition: transform .3s;
}
div:after{
background: blue;
z-index: 1;
}
div:before{
width: calc(100% - 1rem);
height: calc(100% - 1rem);
top: .5rem;
left: .5rem;
background: pink;
z-index: 2;
transition-delay: .1s;
}
div:hover:before,
div:hover:after{
transform: scale(1);
}

我需要的是最后一个内圈(粉红色的(来设置动画，但在悬停时，我希望它先出现。

有没有什么方法可以做到这一点，只有CSS？

Answer 1

您应该使用css@keyframes。然后你可以使用animation，它有很好的属性来帮助你实现这一点。

查看此链接和关键帧的此链接

提示

您可以使用animation-direction: reverse属性

Answer 2

您可以通过为正常状态和：悬停状态指定不同的值，在两个"方向"上添加转换延迟。当元素进入相应状态时，每一个都将应用。

我把你的例子中的值增加了10倍，这样我们就可以更容易地观察到发生了什么，但你可以再次加快速度。

因此，当元素进入悬停状态时，只需延迟粉色：before圆上的转换。另一条路是蓝色的。

div{
height: 10rem;
width: 10rem;
background: red;
border-radius: 100%;
margin: 3rem;
position: relative;
}
div:before,
div:after{
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 100%;
transform: scale(0);
transition: transform 3s;
}
div:after{
background: blue;
z-index: 1;
transition-delay: 1s;
}
div:before{
width: calc(100% - 1rem);
height: calc(100% - 1rem);
top: .5rem;
left: .5rem;
background: pink;
z-index: 2;
}
div:hover:before,
div:hover:after{
transform: scale(1);
}
div:hover:before {
transition-delay: 1s;
}
div:hover:after {
transition-delay: 0s;
}

<div></div>