如何构建纯 CSS 加载动画（带关键帧）

动画是使网站更有趣的好方法；让我告诉你怎么做。

大多数动画都以一种或另一种形式依赖于 javascript，尤其是当它们处理复杂的序列或发生在用户交互（例如滚动或单击）之后时。

但是，如果我们要构建一个根本不需要任何用户交互的简单动画，那么它可以完全使用 css 来完成。

CSS 加载动画演示

在本教程中，我们将仅使用 CSS 构建带有移动元素的横幅。它使用关键帧、有趣的背景、遮罩——有很多事情要做！这是最终产品（点击重新运行以查看回放）：

See the Pen Pure CSS Split Screen Loader by Envato Tuts+ (@tutsplus) on CodePen.

让我们开始吧！

1.使用 html 标记

对于我们网页的结构，我们会将横幅分解为我们将要制作动画的各个元素。

<div class="container">
  <div class="split-screen"></div>
  <div class="background-image"></div>
  <div class="content">
    <p>Hello <span class="comma">,</span></p>
    <p>World</p>
  </div>
</div>

2.使用 CSS 设计样式

现在我们可以设置页面布局的样式了。让我们从静态元素开始，即不需要任何动画的元素。

body {
  margin: 0;
  background-color: #b1bcbf;
}
.container {
  width: 100%;
  height: 100vh;
  position: relative;
}
.background-image {
  width: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background-image: url("https://images.pexels.com/photos/1261728/pexels-photo-1261728.jpeg");
  background-size: cover;
}

这是我们的页面目前的样子：

3.使用 CSS 制作动画

完成静态样式后，我们可以继续处理动画元素。使用 CSS 动画时要牢记的主要事情是监控每个动画元素的时间以确保它们流畅地一起流动。幸运的是，您可以使用 chrome DevTools动画检查器查看网页上任何动画的详细信息。这张图表让我们清楚地了解网页中每个动画元素的起点和过程。

让我们看一下演示的时间表：

现在我们对时间轴的样子有了一个概念，让我们从分屏动画开始重新创建它。

元素的初始样式设置为完全覆盖页面：

.split-screen {
  width: 100%;
  background-color: #2c2d2b;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
}

然后我们将使用该属性定义一个新的动画@keyframes。

关键帧用于确定每个动画的时间轴。

例如，如果我们有一个持续 2 秒的动画并且我们将关键帧属性 opacity: 1 设置为 50%，这意味着该元素将在 1s 时达到 1 的不透明度。我们还可以使用from和to关键字来指定开始和结束关键帧。

我们想要将分屏元素设置为从页面宽度的 100% 到 50%。

@keyframes reduceSize {
  from {
    width: 100%;
  }
  to {
    width: 50%;
  }
}

将动画关键帧分配给元素

split-screen现在我们可以使用属性将此动画分配给元素animation-name。animation-duration 我们还可以使用和属性控制动画的时间animation-delay。根据上面的动画图表，我们希望分屏动画在页面加载后 500 毫秒开始，因此我们将其延迟 0.5 秒：

animation-name: reduceSize;
animation-duration: 1.5s;
animation-delay: 0.5s;

这就是我们的动画现在的样子（再次点击重新运行以查看动画）：

See the Pen Pure CSS Split Screen Loader by Envato Tuts+ (@tutsplus) on CodePen.

动画填充模式

从上面的笔中，我们会注意到元素在动画之后恢复到其原始状态。我们可以通过使用该属性来防止这种情况发生animation-fill-mode。这个属性允许我们控制动画元素在动画执行之前和之后的状态。

animation-name: reduceSize;
animation-duration: 1.5s;
animation-delay: 0.5s;
animation-fill-mode: forwards;

通过将该属性设置为forwards，我们指定动画应保持其最后一个关键帧的状态。这是我们更新的动画：

See the Pen Pure CSS Split Screen Loader by Envato Tuts+ (@tutsplus) on CodePen.

使用速记属性更好

到目前为止，我们可以使用动画速记属性来应用所有动画样式。现在我们的分屏样式如下所示：

.split-screen {
  width: 100%;
  background-color: #2c2d2b;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  animation: reduceSize 1.5s 0.5s forwards;
}

animation-duration 值应该放在 animation-delay 值之前。

下一个动画

我们应用于分屏横幅的下一个动画是将其移动到屏幕右侧。我们将定义一个关键帧属性来处理这个问题：

@keyframes moveRight {
  from {
    left: 0%;
  }
  to {
    left: 50%;
  }
}

我们将动画的时间设置为在页面加载后 3 秒开始，总共持续 1.5 秒。我们还可以在 CSS 中组合动画：

.split-screen {
  width: 100%;
  background-color: #2c2d2b;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  animation: 
    reduceSize 1.5s 0.5s forwards,
    moveRight 1.5s 3s forwards;
}

页面内容动画

接下来，我们将为页面上的内容制作动画。

为内容设置三种动画：

从页面底部向上滑动时内容淡入
内容向右滑动
内容将文本颜色从白色更改为背景图像

让我们为每个定义关键帧。为了向右滑动内容，我们可以重用已经定义的 moveRight 动画。

@keyframes fadeInUp {
  from {
    transform: translateY(100vh);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes changeBackground {
  to {
    background-image: url("https://images.pexels.com/photos/1261728/pexels-photo-1261728.jpeg");
    background-size: 200%;
    background-position: center;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}

对于 changeBackground 关键帧，我们使用该background-clip属性将文本颜色设置为背景图像而不是单一颜色。

现在让我们为内容设计样式。由于我们正在处理动画延迟，因此我们需要将动画的开始关键帧直接应用于内容，否则这会在动画开始时引起 jar。看看如果我们没有与关键帧开始样式匹配的初始内容样式会发生什么：

See the Pen Remove content initial styling by Envato Tuts+ (@tutsplus) on CodePen.

在应用动画中的 opacity 和 transform 属性之前，内容在页面加载时可见fadeInUp，因此我们需要在内容样式中包含这些属性：

.content {
  color: white;
  font-size: 10vw;
  text-transform: uppercase;
  position: absolute;
  width: fit-content;
  height: fit-content;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 4;
  opacity: 0;
  transform: translateY(100vh);
  animation: 
    fadeInUp 2s 0.5s, 
    moveRight 1.5s 3s,
    changeBackground 1.5s 3s;
  animation-fill-mode: forwards;
}

最后一个细节

最后，为了好玩，我们将最后一个动画应用于包含逗号的范围：

.content .comma {
  color: #2c2d2b;
  opacity: 1;
  animation: fadeOut 0.5s forwards 2.5s;
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}