Jquery CSS文本效果：文本在效果出现之前在屏幕上出现一秒钟

可能很简单，但却把我难住了

我有一个覆盖菜单和一些导航链接里面。我想做的是一个简单的“向上滑动”文本效果，其中文本似乎从基线向上“向上”。这是一种常见的效果，我用线高和超简单的动画实现了它

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

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

HTML:

JQUERY：

$(document).ready(function() {

  $('button').click(function () {

      //make overlay appear
      $('li span').addClass('reveal');  //adds the animation to the text
  });

});

这将向你展示我想要的效果和问题。注意：代码是超级破坏，我只是需要帮助的效果本身

我理解为什么会这样：我告诉浏览器在文本出现在屏幕上后100%翻译文本，而不是先隐藏它。如何隐藏文本直到动画开始

---

我试过的都没用。我只希望文本在滑入视图之前不可见。我做错了什么？

您可以使用

动画填充模式：forwards

来保持动画的结束状态。然后转换起始状态：

span{
    transform: translate(0, 100%);
}

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

---

要以0%的初始动画开始，您需要将相同的设置初始地添加到span:li span{transform:translate（0，100%）；}

我猜，要以0%的初始动画开始，您需要将相同的设置初始地添加到span:li span{transform:translate（0，100%）；}@liquidcrome，它可以工作！我花了一个小时把可见性：hidden，不透明性：0，hide（）应用到我能找到的任何元素上，答案就在我眼皮底下。如果你把这个作为回答转告我，我就赏金给你：）你的建议是正确的；然而，另一张海报添加了一个关键细节（正向填充模式），彻底解决了这个问题。无论如何，谢谢你的帮助！

$(document).ready(function() {

  $('button').click(function () {

      //make overlay appear
      $('li span').addClass('reveal');  //adds the animation to the text
  });

});

span{
    transform: translate(0, 100%);
}

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