我不知道是否曾经问过这个问题，但是无论我在哪里看，答案都没有帮助。我想做的是先将文本移开，然后抬起一个灰色框，当我将鼠标从该灰色框移开时，该灰色框先下降，然后再移回文本。使用我的代码，文本先移回去，看起来不太好。恢复到正常状态时，有没有办法反转转换顺序？这是我的CSS：
.doge{
font-size: 50px;
font-family: "Comic Sans MS";
text-align: center;
background-image: linear-gradient(#c6a65f 70%,#cbc595 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-position: left;
transition: 1.6s;
}
.dogediv{
width: 537px;
height: 529px;
background-image: url("https://pbs.twimg.com/profile_images/378800000822867536/3f5a00acf72df93528b6bb7cd0a4fd0c.jpeg");
background-position: right;
position: relative;
}
.div2 {
background-color: gray;
height: 100%;
transition: 5s;
transition-delay: 1s;
}
.div2:hover > .doge{
transform: translateX(550px);
}
.div2:hover {
height: 10px;
}
HTML：
<!DOCTYPE html>
<html>
<head>
<title>Home of the Doge</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="dogediv">
<div class="div2" style="background-color: gray">
<h1 class="doge">Welcome to the Home of the Doge</h1>
</div>
</div>
</body>
</html>
最佳答案
在类“ doge”上添加transition-delay：1s，在div2上添加transition-delay：0.5s。
.doge{
font-size: 50px;
font-family: "Comic Sans MS";
text-align: center;
background-image: linear-gradient(#c6a65f 70%,#cbc595 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-position: left;
transition: 1.6s;
transition-delay: 1s;
}
.dogediv{
width: 537px;
height: 529px;
background-image: url("https://pbs.twimg.com/profile_images/378800000822867536/3f5a00acf72df93528b6bb7cd0a4fd0c.jpeg");
background-position: right;
position: relative;
}
.div2 {
background-color: gray;
height: 100%;
transition: 3s;
transition-delay: 0.5s;
}
.div2:hover {
height: 10px;
}
.div2:hover > .doge{
transform: translateX(550px);
transition-delay: 0s;
}<div class="dogediv">
<div class="div2" style="background-color: gray">
<h1 class="doge">Welcome to the Home of the Doge</h1>
</div>
</div>希望这对您有帮助。