javascript - 如何构建一个 "slides in"的 CSS 动画，在完成滑动后显示一个文本/div？

Question

我正在尝试从此处的网站模仿 CSS 动画:https://stanographer.com/

我想复制网站的方式:

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

“加载”文本后面的黑色背景(div 标签)(如“嗨，我是 Stanley Sakai”)，从左到右扩展

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

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

我去过几个不同的 StackOverflow 页面 (here's one) & 超过十几个不同的谷歌页面。我了解了如何使用关键帧，但我还没有弄清楚如何在 Stanographer.com 上重新创建效果。拥有网站的 friend 也提供了 this例如，但我不知道如何将其应用于单个 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 , 屏蔽动画元素以不显示元素的任何部分(这也会导致伪元素不显示，因为它是元素的一部分)。剪裁的方向很重要。这里的方向是从右侧到左侧。

使用 animation和 @keyframes ，取消屏蔽之前屏蔽的 div。这将从左侧到右侧缓慢地显示它(因为最初，我们从右到左屏蔽它；在取消屏蔽时，会发生相反的方向)

取消屏蔽元素后，伪元素将位于我们要显示的文本之上

稍等片刻后，屏蔽伪元素 (不是整个元素)从右方向到左方向，再次使用 clip-path使文字看起来慢慢地显露出来

有用!但是，我建议阅读 clip-path .此外，我非常喜欢使用的一个非常方便的剪辑路径 CSS 生成器是 this (如果要从右向左剪辑，则应从右向左拖动点)。我也是 强烈推荐阅读 CSS positioning (优秀的 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)。