CSS:如何创建这种淡入淡出动画

Question

如何创建这种css动画，其中元素从底部淡入，但看起来像被溢出剪辑：

http://fr.creasenso.com/(请参阅痕迹导航文本(

我已经尝试了所有基础知识，但没有去任何地方翻译。我需要去图书馆还是只能用 css 实现？

Answer 1

你的问题的措辞可以做一些改进。但除此之外，我认为这就是您正在寻找的：

https://jsfiddle.net/5ws33c8s/

您需要一个具有overflow: hidden的父元素。其次是使用translate: translateY()移出的孩子。然后，我使用 css 关键帧将其移回：

animation: fadeInText 300ms 0ms forwards;
@keyframes fadeInText {
  from {
    transform: translateY(30px);
    opacity: 0;
  } to {
    transform: translateY(0);
    opacity: 1;
  }
}

此动画设置如下; fadeInText是关键帧名称，300ms是动画的持续时间，0ms是所述动画的延迟，forwards记住动画的最终状态，并将元素保留为这样。没有它，元素将跳回到其原始值。然后，我对每个子元素使用了延迟。

span:nth-child(2) {
  animation-delay: 150ms;
}