通过创建纯 CSS 加载器来学习 CSS 动画

2025-05-24

通过创建纯 CSS 加载器来学习 CSS 动画

你一直想学习 CSS 动画的基础知识吗？我也是！让我们一起在 5 分钟内创建一些纯 CSS 加载动画。

在我们开始之前

CSS 动画已有多年历史。所有主流浏览器的最新版本均已完全支持 CSS 动画。本教程的最后，我们将介绍如何回退到旧版浏览器。

语法

让我们直接查看以下示例：

<!-- HTML -->
<div class="simple-spinner"></div>
Enter fullscreen mode Exit fullscreen mode 
/* CSS */
.simple-spinner {
  height: 48px;
  width: 48px;
  border: 5px solid rgba(150, 150, 150, 0.2);
  border-radius: 50%;
  border-top-color: rgb(150, 150, 150);
  animation: rotate 1s 0s infinite ease-in-out alternate;
}
@keyframes rotate {
  0%   { transform: rotate(0);      }
  100% { transform: rotate(360deg); }
}
Enter fullscreen mode Exit fullscreen mode 
// 结果
Enter fullscreen mode Exit fullscreen mode

看起来已经很酷了！这里发生了什么？首先，我们创建一个圆环，<div>宽度和高度相同，边框颜色不同，并且设置了 50% 的 border-radius 半径。要应用动画，我们会看到两件事：

  1. 定义animation我们想要动画的元素的属性
  2. 定义@keyframes规则

动画属性

animation是一个简写属性，用于一次性设置多个动画属性。让我们以上面的例子为例，详细地看一下：

例子 财产 描述
旋转 animation-name 要使用的动画的名称
1秒 animation-duration 一个动画周期持续多长时间
0秒 animation-delay 等待动画开始需要多长时间
无限 animation-iteration-count 动画应重复多少次
缓入缓出 animation-timing-function 动画如何在一个周期内进行
备用 animation-direction 向前、向后或来回交替进行动画。

这意味着，我们指定了一个名为“旋转”的动画，一个循环（360°）持续一秒，没有启动延迟，动画本身永远持续下去，动画进度不是线性的，而是来回交替（每秒循环一次都是向后）。

注意：为了完整起见，还有animation-fill-mode和animation-play-state，但我们不会在本教程中介绍这两个属性。

@keyframes 规则

现在让我们进入动画实际创建的部分。借助@keyframes，您可以指定动画时间轴上的状态。对于每个状态，您可以定义何时出现（动画时间的百分比）以及要应用哪些样式声明。

上面的示例动画从 0% transform: rotate(0);（无旋转）到 100% transform: rotate(360deg);（一次完整旋转）。

当然，同一条@keyframes规则可以被多个元素使用。以下是两个元素使用不同animation规则但使用相同@keyframes声明的示例：

<!-- HTML -->
<div class="double-spinner"></div>
Enter fullscreen mode Exit fullscreen mode 
/* CSS */
.double-spinner {
  height: 48px;
  width: 48px;
  border: 5px solid rgba(150, 150, 150, 0.2);
  border-radius: 50%;
  border-top-color: rgb(150, 150, 150);
  animation: rotate 1s 0s infinite linear normal;
}
.double-spinner::after {
  content: '';
  height: 40%;
  width: 40%;
  display: block;
  margin: 10px auto;
  border: inherit;
  border-radius: inherit;
  border-top-color: inherit;
  animation: rotate .5s 0s infinite linear reverse;
}
@keyframes rotate {
  0%   { transform: rotate(0);      }
  100% { transform: rotate(360deg); }
}
Enter fullscreen mode Exit fullscreen mode 
// 结果
Enter fullscreen mode Exit fullscreen mode

对于开始和结束状态（0%和100%），您还可以使用关键字from和 ，to如下所示：

@keyframes rotate {
  from { transform: rotate(0);      }
  to   { transform: rotate(360deg); }
}
Enter fullscreen mode Exit fullscreen mode

让我们看一个包含更多状态的示例：

<!-- HTML -->
<div class="flip-walker"></div>
Enter fullscreen mode Exit fullscreen mode 
/* CSS */
.flip-walker {
  width: 64px;
  height: 64px;
}
.flip-walker::before {
  content: '';
  display: block;
  width: 50%;
  height: 50%;
  background: rgba(150, 150, 150, .5);
  animation: flip 2s 0s infinite ease normal;
}
@keyframes flip {
  0%   { transform: translate(0, 0)       rotateX(0)       rotateY(0);      }
  25%  { transform: translate(100%, 0)    rotateX(0)       rotateY(180deg); }
  50%  { transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg); }
  75%  { transform: translate(0, 100%)    rotateX(-180deg) rotateY(360deg); }
  100% { transform: translate(0, 0)       rotateX(0)       rotateY(360deg); }
}
Enter fullscreen mode Exit fullscreen mode 
// 结果
Enter fullscreen mode Exit fullscreen mode

这里我们应用了五种不同状态下的CSS 转换，以制作翻转正方形的动画。

多个动画

可以将多个动画应用于同一元素。如果我们想让上方翻转的正方形同时发光，只需添加另一个动画，并以逗号分隔即可：

/* CSS */
.flip-walker::before {
  /* ... */
  animation:
    flip 2s 0s infinite ease normal,
    glow 2s 0s infinite linear normal;
}
@keyframes flip {
  /* ... */
}
@keyframes glow {
  to { background: white; box-shadow: 0 0 15px white; }
}
Enter fullscreen mode Exit fullscreen mode 
// 结果
Enter fullscreen mode Exit fullscreen mode

注意：我只使用了to规则，而省略了from规则。这是可能的，因为浏览器会使用元素的现有/初始样式来处理缺失的开始或结束状态。

自定义计时功能

如果您对默认的计时函数不满意，可以借助三次贝塞尔曲线自定义计时函数。有很多工具可以定义这样的曲线，我主要使用Matthew Lein 提供的这个。

这是本教程的最后一个例子：

<!-- HTML -->
<div class="pulse"></div>
Enter fullscreen mode Exit fullscreen mode 
/* CSS */
.pulse {
  width: 64px;
  height: 64px;
  background: white;
  border-radius: 50%;
  animation: pulse 1s 0s infinite cubic-bezier(0.000, 1.010, 0.5, 1.200) normal;
}
@keyframes pulse {
  from { transform: scale(0);   opacity: 1; }
  to   { transform: scale(1.0); opacity: 0; }
}
Enter fullscreen mode Exit fullscreen mode 
// 结果
Enter fullscreen mode Exit fullscreen mode

计时功能刚刚被cubic-bezier(0.000, 1.010, 0.5, 1.200)我创建的取代。

后备方案

如果您希望特别支持老版本浏览器，可以使用@supports@ 规则进行功能查询，并提供后备选项，例如 GIF。以下是一个简单的示例：

/* CSS */
.animated {
  background: url(animation-as.gif);
}
@supports (animation-name: test) {
  .animated {
    background: none;
    animation-name: test;
    /* ... */
  }
  @keyframes test {
    /* ... */
  }
}
Enter fullscreen mode Exit fullscreen mode

不支持该animation-name属性甚至不支持该@supports规则的浏览器将简单地将 GIF 图像显示为元素的背景。

总结

借助一些简单的 CSS 加载动画示例（单个元素），我们了解了如何创建 CSS 动画、定义不同的动画状态、使用多个动画以及创建自定义时间函数。这就是您创建精彩 CSS 动画所需的一切！🔥

如果你想尝试一下上面的例子，我把它们都整理在这支笔里了。如果你有任何疑问，或者想分享你的创作，欢迎留言。

发布日期：2019 年 11 月 26 日
封面图片：https://codepen.io/devmount/full/NWWZKEN

文章来源：https://dev.to/devmount/learn-css-animation-by-creating-pure-css-loaders-3lm6
Devto 翻译
PREV
我希望 PHP 8 的功能也存在于 JavaScript 1: 2: 3:
NEXT
面向开发人员的 128 个备忘单