CSS 文本效果:文本在效果开始前会在屏幕上显示一秒钟

Question

可能很简单，但让我难倒了。

我有一个覆盖菜单和一些导航链接。我想做的是一个简单的"向上滑动"文本效果，其中文本似乎从基线"上升"。这是一种常见的效果，我已经实现了它与行高和超级简单的动画。

jQuery：基本上，这个想法是，当有人点击菜单图标时，文本会在向上滑动时出现。

问题是：效果"有效"，但是，当我打开菜单时，文本实际上在效果开始前一瞬间出现。

.HTML：

<ul>
<li><span>Hello</span></li>
<li><span>Dog</span></li>
</ul>

.CSS：

li {
overflow: hidden;
line-height: 1;
}
.reveal {
display: block;
animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s; 
}
@keyframes reveal {
0% {
transform: translate(0, 100%);
}
100% {
transform: translate(0, 0);
}
}

JQUERY：

$(document).ready(function() {
$('button').click(function () {
//make overlay appear
$('li span').addClass('reveal');  //adds the animation to the text
});
});

这个jsFiddle将向您展示我要追求的效果和问题。注意：代码超级损坏，我只需要效果本身的帮助。

我明白为什么会发生这种情况：我告诉浏览器在文本已经出现在屏幕上后 100% 翻译文本，而不是先隐藏它。如何在动画开始之前隐藏文本？

我尝试过的一切都没有奏效。我只是希望文本在滑入视野之前是不可见的。我做错了什么？

Answer 1

可以使用animation-fill-mode: forwards来维护动画的结束状态。然后翻译起始状态：

span{
transform: translate(0, 100%);
}
.reveal { 
display: block;
animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s forwards;
}

Answer 2

要从 0% 的初始动画开始，您需要将相同的设置添加到跨度中：li span{transform： translate(0， 100%);}