CSS Reversed Transitions Order
Question
I don't know if this question has been asked before, but wherever I looked, the answer wasn't helpful. What I'm trying to do is move text away and then lift up a gray box, and when I move my mouse away from the gray box, the gray box goes down first, and then the text moves back. With my code, the text moves back first, which doesn't look good. Is there a way to reverse the transition order when reverting back to normal? Here is my 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>
1 answers
solution1
5 ACCPTED 2016-07-10 04:12:27
Add transition-delay:1s on class "doge" and transition-delay:0.5s on div2.
.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>
May this help you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.