使用 CSS 动画增强网页加载方式

在之前的教程中，我们使用 flexbox 创建了一个全屏响应页面。今天，我们将通过添加一些 css 动画来使这个页面更具吸引力。

使用 CSS 动画增强网页加载方式第1张

这是我们要构建的：

See the Pen How to Build a Full-Screen Responsive Page With Flexbox (Animated) by Envato Tuts+ (@tutsplus) on CodePen.

1. html

为了添加所需的动画，我们将稍微更新初始页面标记。在上一个教程中，我们 main元素的标记如下所示：

<main class="page-main">
  <div>
    <h1>...</h1>
    <p>...</p>
    <p>...</p>
  </div>
</main>

出于本教程的目的，我们将添加一些额外的包装器，将其更改为：

<main class="page-main">
  <div>
    <div class="text-wrapper">
      <h1>...</h1>
    </div>
    <div class="text-wrapper p-wrapper">
      <p>...</p>
    </div>
    <div class="text-wrapper p-wrapper">
      <p>...</p>
    </div>
  </div>
</main>

以下是修改后的整体页面标记：

<div class="wrapper">
  <header class="page-header">
    <nav>
      <h2>...</h2>
      <ul>...</ul>
      <button class="cta-contact">...</button>
    </nav>
  </header>
  <main class="page-main">
    <div>
      <div class="text-wrapper">
        <h1>...</h1>
      </div>
      <div class="text-wrapper p-wrapper">
        <p>...</p>
      </div>
      <div class="text-wrapper p-wrapper">
        <p>...</p>
      </div>
    </div>
  </main>
  <footer class="page-footer">
    <small>...</small>
    <ul>...</ul>
  </footer>
</div>

2. 添加初始 CSS 样式

有了 HTML，让我们将注意力集中在重要的东西上：CSS。

首先，我们将做四件事：

隐藏所有页面元素。
header为andfooter 元素及其子元素设置样式。
::after为的伪元素定义样式header。
为文本包装器及其在main.

以下是相关的样式：

/* variables */
:root {
  --main-purple-color: #9e89b8;
}

.page-header nav > *,
.page-main,
.page-footer > * {
  opacity: 0;
}

.page-header,
.page-footer,
.page-main .text-wrapper {
  overflow: hidden;
}

.page-header nav > * {
  transform: translateY(-30px);
}

.page-footer > * {
  transform: translateY(30px);
}

.page-header {
  position: relative;
}

.page-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--main-purple-color);
  z-index: 99999;
  transform: scaleX(0);
}

.page-main .text-wrapper + .text-wrapper {
  margin-top: 10px;
}

.page-main .text-wrapper * {
  transform: translateY(120%);
}

.page-main .p-wrapper * {
  transform: translateY(-120%);
}

3.触发 CSS 动画

准备好 HTML 和基本 CSS 后，我们现在可以专注于页面动画。

但是，在这样做之前，让我们确保我们了解它们应该何时运行：理想情况下，一旦页面完全加载。这样可以确保所有页面资源都准备就绪，位于正确的位置，并且我们不会丢失任何动画效果。

考虑到这一点，我们首先等待页面加载，然后使用 javascript 将一个loaded类添加到body.

以下是相关的 JavaScript 代码：

window.addeventListener("load", () => { document.queryselector("body").classList.add("loaded"); });

我们应用的任何动画都将应用于该类的后代loaded。

因此，我们的第一个缩放动画针对的::after伪元素header：

.loaded .page-header::after {
  animation: scaleIn 1.3s ease-in 0.2s forwards;
}

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

提示：默认情况下，元素的变换原点是它的中心，这就是伪元素的动画从它的中心开始的原因。如果您希望动画从另一个位置开始，只需更改transform-origin目标元素的属性值即可。

下面你可以看到我们的动画在我们应用不同的地方是如何变化的transform-origin：

See the Pen Origin demos by Envato Tuts+ (@tutsplus) on CodePen.

接下来，我们使用淡入效果来显示页面元素。除了这个动画，我们还使用了一个滑入式动画来展示header和footer内容：

.loaded .page-main {
  animation: fadeIn 1s ease-in 0.7s forwards;
}

.loaded .page-header nav > *,
.loaded .page-footer > * {
  animation: fadeIn 1s ease-in 0.7s forwards, slideIn 0.8s ease-in 0.9s forwards;
}

@keyframes fadeIn {
  60% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

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

main最后，通过滑入效果可见的元素：

.loaded .page-main .text-wrapper * {
  animation: slideIn 0.6s cubic-bezier(0.54, 0.46, 0.54, 0.94) 2s forwards;
}

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

现在让我们再看看我们刚刚构建的内容：

See the Pen How to Build a Full-Screen Responsive Page With Flexbox (Animated) by Envato Tuts+ (@tutsplus) on CodePen.

结论

在这个快速教程中，我们设法通过利用 CSS 动画来制作 HTML flexbox 页面的动画。

结束前的几点说明：

除了 CSS 动画，我们同样可以使用 CSS 过渡（几乎我们所有的动画都是从开始状态到结束状态）。淡入动画是最复杂的动画，因为它包括三个动画步骤（0%、60%、100%）。
代替 2d 变换，我们同样可以使用 3d 变换。
使用 animation-duration和animation-delay属性值根据您的需要修改动画。
在移动屏幕上，您可能希望限制出现的动画数量（例如删除页脚动画）。演示动画效果很好，尤其是在所有页面内容都可见的屏幕上

文章目录

1. html

2. 添加初始 CSS 样式

3.触发 CSS 动画

结论