CSS 动画指南 - 第一部分 开始之前 那么，为什么要动画？我们可以为哪些内容制作动画？ 我们的第一个动画 动画检查器 @keyframes 第一部分就到这里啦🤓

2025-05-25

CSS 动画指南 - 第一部分

在我们开始之前

那么，为什么要动画呢？

我们能制作什么动画？

我们的第一个动画

动画检查器

@关键帧

第一部分就到这里啦🤓

让我们行动起来！🎞

嘿！👋 你想让你的网站和应用动起来吗？本指南应该能帮到你👍

这篇文章假设你之前从未创建过CSS动画。即使你创建过，也可能有一些你之前不了解的内容。它假设你对HTML和有一定的了解CSS。我们将探索如何创建你的第一个动画，以及如何链接动画。

单词 CSS 的基本链式动画

CSS 动画是一个可以快速掌握的概念，但一旦我们真正深入研究，就会发现它是一个很大的主题。因此，这篇文章分为几个部分。

  • 第一部分：介绍 CSS 动画，探讨性能以及如何检查动画。我们还将创建一个基本动画并探讨@keyframes其构图。
  • 第二部分：掌握基础知识后，我们将深入探讨如何使用属性来实现不同的效果。其中包括使用和链接动画animation等技巧。fill-mode

第 2 部分链接

  • 第三部分：我们将通过一些附加主题来总结，例如如何使用 CSS 变量以及如何从 中挂钩JavaScript。我们还将讨论是否应该使用 CSS 动画。没错，它并非总是最佳选择。但了解基础知识和替代方案总是有益的。

链接至第 3 部分

在我们开始之前

所有代码都可以在这个 CodePen 集合中找到 🤓

CodePen 演示集链接

这意味着所有示例都可以分叉、下载、编辑等。👍

该代码也可在 Github 上找到

Github 仓库链接

对于所有动画，除非另有说明，我们都使用单个div元素。基本标记包含以下内容：

<html>
  <head>
    <title>Our first animation</title>
    <style>
     * {
       box-sizing: border-box;
     }
     html, body {
       align-items: center;
       background-color: rebeccapurple;
       display: flex;
       justify-content: center;
       margin: 0;
       padding: 0;
     }
     div {
       background-color: #2EEC71;
       height: 100px;
       width: 100px;
     }
    </style>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div />
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

本指南的目标是让你能够轻松地从头开始创建自己的 CSS 动画！💪

那么，为什么要动画呢？

提高可用性和整体用户体验。但这并不意味着动画应该在你的网站上无处不在。动画有其适用的场合和时间。

动画过渡可改善用户体验

利用动画，我们可以吸引用户的注意力，或者引导他们完成一些流程。例如，加载动画或页面过渡效果。

我们能制作什么动画？

在开始创建动画之前，我们需要知道哪些属性可以动画。我们无法为每个属性都添加动画。以下 MDN 文章列出了可以动画的属性。

链接到 MDN 文档

Lea Verou 还拥有一个很棒的动画属性演示页面。

Lea Verou 演示链接

物业表现

在可动画的属性中，我们可能会出于性能考虑选择对某些属性进行动画处理。

例如，使用 可以更好地处理元素位置的动画transform。这是因为 GPU 可以处理该属性的动画繁重工作。某些属性的动画会触发布局。

下面的文章对于理解动画性能非常有用👍

链接到 HTML5Rocks 上的文章

搞定这些之后，我们就开始吧💪

我们的第一个动画

让我们深入研究并创建我们的第一个动画⛏

在这个动画中，我们将让一个元素旋转 360 度。我知道这很有趣 😅 但我们总得有个开始！

div 旋转一次的基本动画

首先，我们使用规则创建动画@keyframes。@keyframes规则的结构如下。

@keyframes [NAME] {
  [ KEYFRAME SELECTOR ] { CSS STYLES }
}
Enter fullscreen mode Exit fullscreen mode

animation-name是我们给动画起的名字。你可以有一个或多个关键帧选择器👍

我们将动画命名为spin。要旋转元素，我们可以使用transform属性 和rotate从0deg到360deg。我们使用两个关键帧选择器。一个用于定义动画的开始（from），另一个用于定义动画的结束（to）。from和to关键字相当于0%和100%。

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

我们可以更进一步。from关键帧选择器下的样式与我们元素的首字母匹配transform。因此，关键帧选择器是多余的。我们可以将其删除。

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

现在，我们需要将动画应用到元素上。我们使用animation-name和animation-duration属性👍

div {
  animation-duration: 2s;
  animation-name: spin;
}
Enter fullscreen mode Exit fullscreen mode

这里我们告诉元素使用spin持续时间为 2 秒的动画。持续时间可以设置为毫秒 ( ms) 或秒 ( s)。

在浏览器中加载它应该会给我们类似的结果

我们的第一个动画🎉

从第一个动画开始，我们已经有足够的能力开始创作很酷的动画了😎 但请继续关注，以全面了解我们还能实现什么💪

动画检查器

Animations我们已经创建了第一个动画。现在似乎是引入检查器的好时机Google Chrome。

在 中打开动画Google Chrome，然后打开。进入 ，Developer Tools打开面板。如果面板显示“正在监听动画…”，请刷新页面。AnimationsMore ToolsAnimations

刷新后，我们应该在Animations面板中看到一些东西，那就是我们的动画！

使用动画检查器的屏幕截图

点击动画，我们就可以检查它了。由于我们的动画不是特别复杂，所以没有太多需要检查的内容。但是使用动画检查器，我们可以做很多事情。我们可以尝试设置动画的时长和延迟，以及调整播放速度。最重要的是，我们可以重放动画，而无需刷新整个页面 😅

使用 Chrome Dev Tools 检查动画的用户流程

当我们有许多动画时，这会变得特别有用。无论是针对不同的元素还是单个元素。

Animations在下面的文章中阅读有关检查员的更多信息。

链接至 Google 开发者网站

在本指南中，我建议在检查演示时使用检查器👍

@关键帧

@keyframes我们在动画中制定了第一条规则spin。

没什么可说的@keyframes。指定动画名称后，我们在关键帧选择器中构建动画。关键帧选择器指定动画时长的百分比。或者，如前所述，我们可以使用与和等价的from和关键字。to0%100%

每个选择器都定义了在动画执行时应该应用的样式。如果我们有指定相同 CSS 样式的选择器，我们可以将它们分组。

让我们从一个简单的例子开始。考虑一个元素沿着正方形路径移动的动画。

元素沿正方形路径动画

我们将调用我们的动画squarePath，我知道这非常有创意😅

在这个例子中，我们的元素将有四个位置。对于正方形的每一条边，我们使用动画的四分之一。由于起始和结束位置相同，我们可以将这些关键帧选择器分组👍

@keyframes squarePath {
  0%, 100% {
    transform: translate(-100%, -100%);
  }
  25% {
    transform: translate(100%, -100%);
  }
  50% {
    transform: translate(100%, 100%);
  }
  75% {
    transform: translate(-100%, 100%);
  }
}
Enter fullscreen mode Exit fullscreen mode

将animation-nameandanimation-duration应用于我们的元素🎉

div {
  animation-duration: 2s;
  animation-name: squarePath;
}
Enter fullscreen mode Exit fullscreen mode

就这样！我们有一个元素沿着正方形的路径移动🎉

第一部分就到这里啦🤓

我们已经了解了创建动画并将其应用于元素的基础知识。我们还可以在浏览器中检查动画并进行调整 💪

虽然这些内容足以让你快速上手并运行 CSS 动画，但还有很多内容！希望你能加入我的第二部分，我们将深入探讨动画的应用以及相关的技巧和窍门。

第 2 部分链接

请记住，所有代码都可以在以下 CodePen 集合中找到👍

CodePen 演示集链接

一如既往，如果您有任何问题或建议，请随时留言或发推文给我🐦！记得在社交媒体上与我联系！😎

文章来源：https://dev.to/jh3y/a-guide-to-css-animation-part-1-36o9
Devto 翻译
PREV
使用 CSS 制作圆形文本？
NEXT
将属性有条件地插入对象字面量的最短方法