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

Question

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

http://fr.creasenso.com/（参见面包屑文字）

我已经尝试了所有的基础知识，但没有使用translateY去任何地方。我是否需要去图书馆或仅用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;
}