CSS动画-隐藏文本直到页面加载

Question

我有css动画，但问题是当页面加载时，文本是可见的，然后它会动画化。我想要它，这样文本在屏幕上动画化之前是不可见的。我的例子就在这里，任何帮助都将不胜感激。

.text-reveal {
margin: 0;
text-align: center;
font-size: 200px;
overflow: hidden;
line-height: 1;
}
.oneReveal {
display: block;
animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
}
.twoReveal {
display: block;
animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 1.2s;
}
.threeReveal {
display: block;
animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 1.5s;
}

@keyframes "reveal" {
0% {
transform: translate(0,100%);
visibility: hidden;
opacity: 0;
}
100% {
transform: translate(0,0);
visibility: visible;
opacity: 1;
}
}

<div class="container">
<h1 class="text-reveal">
<span class="oneReveal">reveal</span>

</h1>
<h1 class="text-reveal">
<span class="twoReveal">reveal</span>

</h1>

<h1 class="text-reveal">
<span class="threeReveal">reveal</span>

</h1>
</div>

Answer 1

您可以保留%，只需添加"转发"；以及隐藏的可见性。

.text-reveal {
margin: 0;
text-align: center;
font-size: 200px;
overflow: hidden;
line-height: 1;
}
.oneReveal {
display: block;
visibility: hidden;
animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s forwards;
}
.twoReveal {
display: block;
visibility: hidden;
animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 1.2s forwards;
}
.threeReveal {
display: block;
visibility: hidden;
animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 1.5s forwards;
}

@keyframes reveal {
from {
transform: translate(0,100%);
opacity: 0;}
to {
transform: translate(0,0);
visibility: visible;
opacity: 1;
}
}`enter code here`

<div class="container">
<h1 class="text-reveal">
<span class="oneReveal">reveal</span>

</h1>
<h1 class="text-reveal">
<span class="twoReveal">reveal</span>

</h1>

<h1 class="text-reveal">
<span class="threeReveal">reveal</span>

</h1>
</div>