CSS反向轉換順序

Question

我不知道是否曾經問過這個問題，但是無論我在哪里看，答案都沒有幫助。 我想做的是先將文本移開，然后抬起一個灰色框，當我將鼠標從該灰色框移開時，該灰色框會先下降，然后再移回文本。 使用我的代碼，文本先移回去，看起來不太好。 恢復到正常狀態時，有沒有辦法反轉轉換順序？ 這是我的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>

Answer 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>

希望這對您有幫助。

CSS反向轉換順序

問題描述

1 個解決方案

解決方案1
5 已采納 2016-07-10 04:12:27

CSS反向轉換順序

問題描述

1 個解決方案

解決方案1 5 已采納 2016-07-10 04:12:27

解決方案1
5 已采納 2016-07-10 04:12:27