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

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

1
2
3
4
6
7
<main class="page-main">
  <div>
    <h1>...</h1>
    <p>...</p>
    <p>...</p>
  </div>
</main>

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

01
02
03
04
05
06
07
08
09
10
11
12
13
<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>

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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>

有了HTML,让我们把注意力集中在重要的东西上:CSS。

首先,我们将做四件事:

  1. 隐藏所有页面元素。
  2. 设置headerfooter 元素及其子元素的样式。
  3. 为。的::after伪元素定义样式header。 
  4. 为文本包装器及其子元素指定样式main

以下是相关的样式:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
三十
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/* 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%);
}

随着HTML和基本CSS准备就绪,我们现在可以专注于页面动画。 

但是,在这之前,让我们确保我们了解它们何时应该运行:理想情况下,只要页面完全加载。这可确保所有页面资源都准备就绪,坐在正确的位置,我们不会丢失任何动画效果。

考虑到这一点,我们首先等待页面加载,当发生这种情况时,我们使用JavaScript来添加一个loadedbody

这是相关的JavaScript代码:

1
2
3
window.addEventListener("load", () => {
 document.querySelector("body").classList.add("loaded");
});

我们申请的任何动画都将在loaded课程的后代中完成。

所以,我们的第一个缩放动画目标是以下::after伪元素header

1
2
3
4
6
7
8
9
.loaded .page-header::after {
  animation: scaleIn 1.3s ease-in 0.2s forwards;
}
@keyframes scaleIn {
  100% {
    transform: scaleX(1);
  }
}

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

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

 

接下来,我们使用淡入效果来显示页面元素。除了这个动画,我们还使用幻灯片动画来显示headerfooter内容:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.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通过滑入效果可以看到元素:

1
2
3
4
6
7
8
9
.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);
  }
}

现在让我们再看看我们刚刚建立的内容:

结论

在本快速教程中,我们设法通过利用CSS动画为HTML弹性页面设置动画。

关闭前的一些注意事项:

  • 我们可以使用CSS转换(几乎所有动画都从开始状态转到结束状态),而不是CSS动画。淡入动画是最复杂的动画,因为它包含三个动画步骤(0%,60%,100%)。
  • 我们可以使用3d变换而不是2d变换。
  • 使用animation-durationanimation-delay属性值一起播放,  根据您的需要修改动画。
  • 在移动屏幕上,您可能希望限制发生的动画数量(例如,删除页脚动画)。演示动画尤其适用于所有页面内容都可见的屏幕。