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

Question

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

我要复制网站的方式：

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

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

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

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

我访问过几个不同的 StackOverflow 页面 (here's one) 和十几个不同的 Google 页面。我了解了如何使用关键帧，但我还没有弄清楚如何在 Stanographer.com 上重新创建效果。我拥有该网站的朋友也提供了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

您可以使用 CSS3 过渡或 CSS3 动画来滑动元素。

浏览器支持：http://caniuse.com/

我做了两个简单的例子来说明我的意思。

CSS 过渡（悬停时）

演示一

相关代码

.wrapper:hover #slide {
    transition: 1s;
    left: 0;
}

在这种情况下，我只是从左侧转换位置：-100px;为 0； 1s。期间。也可以使用 transform: translate();

移动元素

CSS 动画

演示二

#slide {
    position: absolute;
    left: -100px;
    width: 100px;
    height: 100px;
    background: blue;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
}

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

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

原理同上（Demo One），但是动画2s后自动开始，这里我设置了animation-fill-mode为forwards，会保持结束状态，保持动画时div可见结束。

就像我说的，两个简单的例子向您展示如何做到这一点。

编辑：有关 CSS 动画和过渡的详细信息，请参阅：

动画

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

过渡

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

希望这会有所帮助。