文本显示动画

Question

我得到了我想要的动画，但它并没有从我想要的地方开始。文本应该"出来"。这条线，现在还没有。https://jsfiddle.net/bfth5w1k/

.text {
margin: 100px;
width: 500px;
height: 100px;
position: absolute;
}
h1{    
font-size: 80px;
line-height: 200px;
width: 600px;
position: absolute;
bottom: 0;
left: 80px;
opacity:1;
}
h2{    
font-size: 70px;
line-height: 30px;
width: 600px;
position: absolute;
bottom: 0; 
left: 80px;
opacity:0;
}
h3{    
font-size: 60px;
line-height: 150px;
width: 600px;
position: absolute;
bottom: 0; 
left: 80px;
opacity:0;
}
.line {
position: absolute;
width: 500px;
left: 80px;
height: 5px;
background-color: white;
}

gsap.from(".line", { width: 0, duration: 0.3 });
gsap.from("h1",{height:0,duration:3,delay:0.3,opacity:0})
gsap.to("h2",{height:0,duration:3,delay:0.3,opacity:1})
gsap.to("h3",{height:0,duration:3,delay:0.3,opacity:1})

我不明白，也许css需要一些调整?

Answer 1

如果我对你的问题理解正确，那么这应该是你想要的。

gsap.from(".line", {
width: 0,
duration: 0.3
});
gsap.from("h1", {
height: 0,
duration: 3,
delay: 0.3,
opacity: 0
})
gsap.to("h2", {
height: 0,
duration: 3,
delay: 0.3,
opacity: 1
})
gsap.to("h3", {
height: 0,
duration: 3,
delay: 0.3,
opacity: 1
})

body {
text-align: center;
margin: 0px;
background-color: violet;
}
.text {
margin: 100px;
width: 500px;
height: 100px;
position: absolute;
}
h1 {
font-size: 80px;
line-height: 200px;
width: 600px;
position: absolute;
bottom: 0;
left: 80px;
opacity: 1;
z-index: -1;
/*here*/
}
h2 {
font-size: 70px;
line-height: 30px;
width: 600px;
position: absolute;
bottom: 0;
left: 80px;
opacity: 0;
z-index: 2;
}
h3 {
font-size: 60px;
line-height: 150px;
width: 600px;
position: absolute;
bottom: 0;
left: 80px;
opacity: 0;
z-index: 2;
/*here*/
}
.line {
position: absolute;
width: 500px;
left: 80px;
height: 5px;
background-color: white;
z-index: 2;
}
.cover-up {
background-color: violet;
position: absolute;
top: 105px;
left: 180px;
height: 205px;
width: 500px;
z-index: 1;
/*here*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
<div class="text">
<h1>Up</h1>
<div class="line"></div>
<h2>Down</h2>
<h3>Down2</h3>
</div>
<div class="cover-up"></div>

我在行上方添加了一个div元素，然后使用z-index在不同的文本块之间放置div。