Question

可能很简单，但让我难过。

我有一个叠加菜单，里面有一些导航链接。我想做的是一个简单的＆＃34;向上滑动＆＃34;文字效果，其中文字似乎＆＃34;起来＆＃34;从基线。这是一个常见的效果，我用线高和超简单的动画来实现它。

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

问题：效果＆＃34;有效＆＃34;但是，当我打开菜单时，文字实际上会在效果开始之前暂时显示。

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％）;}

CSS文字效果：文字在效果

2 个答案: