如何构建一个“滑入”的 CSS 动画，在它完成滑动后显示文本/div？

Question

我试图从这里的网站模仿 CSS 动画：https : //stanographer.com/

我想复制网站的方式：

• 首先显示一个向右滑动的全屏黑色 div

• “加载”文本后面的黑色背景（div 标签）（如“嗨，我是酒井斯坦利”），从左到右扩展

  • 在黑色背景 div 上“加载”文本，从左到右扩展。

现在您可能会问，“为什么不检查页面，查看 div 和文本上的类，然后检查网络选项卡中的 CSS 表？” 我已经试过了。CSS看起来很奇怪。我的朋友说它是由 SASS 预处理的，不管是什么意思。无论如何，我无法破译密码。

我去过Google 上的几个不同的 StackOverflow 页面（这里是一个）和十多个不同的页面。我学会了使用关键帧，但我还没有想出如何在 Stanographer.com 上重新创建效果。拥有该网站的朋友也提供了此示例，但我不知道如何将其应用于单个 div。他说了一些关于使用 z-index 的内容，但我只是没有看到。

我知道要使页面以全黑屏幕开始然后滑出，我必须使用 JavaScript 触发类更改。我有：

let blackStuff = document.getElementById("blackness");

window.addEventListener("load", () => {
    console.log("loaded");
    blackStuff.setAttribute("class", "black-box-out");
  },
  false
);

.black-box {
  position: fixed;
  float: left;
  top: 0;
  width: 100%;
  height: 100%;
  bottom: 0;
  background-color: #000;
  z-index: 999999;
  -webkit-animation: powerslide 0.5s forwards;
  -webkit-animation-delay: 2s;
  animation: powerslide 0.5s forwards;
  animation-delay: 2s;
}

@-webkit-keyframes powerslide {
  100% {
    left: 0;
  }
}

@keyframes powerslide {
  100% {
    left: 0;
  }
}

.black-box-out {
  margin-left: 100%;
  animation: slide 0.5s forwards;
  -webkit-transition: slide 0.5s forwards;
  transition: slide 0.5s forwards;
}

<div id="blackness" class="black-box"></div>

但这只会使“黑色”div 在页面加载时立即消失。我想让它滑出来。显然，我不知道如何使用 CSS 动画。

如果您有兴趣了解更多不起作用的内容，请继续阅读。否则，您可以跳过此部分：它仅显示我失败的试验。

我已经学会了如何让 CSS 动画从 0 开始水平展开：

.wrapper {
  position: relative;
  overflow: hidden;
  width: 500px;
  height: 50px;
  border: 1px solid black;
}

.slide-custom {
  width: 500px;
  height: 50px;
  background: cyan;
  position: relative;
  -webkit-animation: slideIn 2s forwards;
  animation: slideIn 2s forwards;
}


/* moz and webkit keyframes excluded for space */

@keyframes slideIn {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

<div class="wrapper slide-custom">
  <h1 class="slide-custom">
    <span>MEET ROLY POLY.</span>
    <!-- expands horizontally from 0 width to 100% width -->
  </h1>
</div>

我已经学会了让文本从左侧“滑入”，尽管当我希望它从 0% 宽度开始时它从 100% 宽度开始：

/* CSS */

.test-slide {
  animation-duration: 3s;
  animation-name: testSlide;
}

@keyframes testSlide {
  from {
    margin-left: 0%;
    width: 50%;
  }
  to {
    margin-left: 100%;
    width: 100%;
  }
}

<div class="test-slide">
  <h1><span>ABOUT.</span></h1>
  <!-- will slide in from the left -->
</div>

还有更多 - 不幸的是，它没有一个模仿我试图复制的网站。

Answer 1

解释

有多种方法可以实现您真正想要的。我没有选择动画width。动画的前几帧不会像预期的那样。

因此，我们可以使用clip-path. 什么clip-path主要作用是掩蔽。您可以“裁剪”一个 div，使其只有一部分可见。我们将利用clip-path和::before或::after伪元素（两者都可以）来创建这个动画。我们需要做的：

• 创建伪元素并将其定位，使其覆盖（位于顶部）整个可动画元素 ( position: absolute)
• 将伪元素的背景设置为黑色
• 使用clip-path, 屏蔽可动画元素以不显示元素的任何部分（这也会导致伪元素不显示，因为它是元素的一部分）。剪辑的方向很重要。这里的方向是从右侧到左侧。
• 使用animationand @keyframes，取消屏蔽之前屏蔽的 div。这将从左侧到右侧慢慢显示（因为最初，我们从右到左屏蔽了它；在取消屏蔽时，会发生相反的方向）
• 取消屏蔽元素后，伪元素将位于我们要显示的文本之上
• 稍等片刻后，将伪元素（不是整个元素）从右方向向左方向进行遮罩，再次使用clip-path使文本看起来显示缓慢

有用！但是，我建议阅读有关clip-path 的内容。另外，我非常喜欢使用的一个非常方便的剪辑路径 CSS 生成器是这个（如果你想从右到左剪辑，你应该从右到左拖动点）。我还强烈推荐阅读CSS 定位（优秀 CSS 动画的主要内容）。你不需要使用z-index: 9999; 您通常希望跟踪z-index您使用的内容。

解决方案

这是使用所述方法的工作解决方案。尝试运行它。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Helvetica;
}

body,
html {
  width: 100%;
  height: 100%;
}

#wrapper {
  background: #555555;
  width: 100%;
  height: 100%;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#wrapper * {
  margin: 5px;
}

.heading {
  font-size: 3em;
  padding: 10px 5px;
}

.caption {
  font-size: 1em;
  padding: 5px;
  font-family: Courier;
}

.animatable {
  position: relative;
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  animation: .75s cubic-bezier(1,-0.01,.12,.8) 1s 1 reveal forwards;
}

.animatable::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #20262b;
  padding: inherit;
  animation: .75s cubic-bezier(1,-0.01,.12,.8) 1.75s 1 hideBlack forwards;
}

@keyframes reveal {
  from { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); }
  to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

@keyframes hideBlack {
  from { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  to { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
}

<div id="wrapper">
  <div class="heading animatable">Hi, I am Richard!</div>
  <div class="caption animatable">I am a person.</div>
</div>

尽管可以仅使用 CSS 来创建您想要的简单动画，但我仍然建议您阅读有关如何使用 JavaScript 制作动画以及它在制作动画中所具有的各种库的信息。这是因为一旦有许多动画和过渡正在进行，就很难跟踪动画（尤其是当您希望动画在另一个动画结束后开始时）。一个好的库是anime.js（在确定一个之前，请探索更多选项）。此外，请注意动画仅在您提供的网站中向下滚动时才会出现？这仅适用于 JS（其中一种方法是使用IntersectionObserver大多数浏览器提供的 API）。