CSS 反转转换顺序答案

【问题标题】：CSS Reversed Transitions OrderCSS 反转转换顺序
【发布时间】：2016-07-10 14:01:12
【问题描述】：

我不知道以前是否有人问过这个问题，但无论我在哪里看，答案都没有帮助。我要做的是将文本移开，然后抬起一个灰色框，当我将鼠标从灰色框移开时，灰色框首先下降，然后文本向后移动。使用我的代码，文本首先向后移动，这看起来不太好。恢复正常时有没有办法反转过渡顺序？这是我的 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>

【问题讨论】：

你能提供你的html吗？

标签： html css transition

【解决方案1】：

在“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>

希望对您有所帮助。

【讨论】：

请注意，如果您在 .doge 类上使用转换延迟，它将在其正常状态和悬停状态下应用，使转换在鼠标进入后 1 秒开始。您可以在 .div2:hover > .doge 中添加 transition-delay: 0s 来防止这种情况发生。
在悬停时添加它不能正常工作。这就是我喜欢这样做的原因。