CSS — 如何使用关键帧创建简单的动画

我决定对我从事的一些项目的关键帧做一个简单的教程。我 不会使用 JS 对于本教程。

第 1 步 — 设置 HTML

首先添加一些简单的样板 HTML。然后继续为要关键帧的元素创建一些 div。 笔记： 您可以使用其他容器或元素，但对于本教程，我将使用 div 容器。

完成后，您的 HTML 可能看起来像这样

您可以根据需要添加任意数量的元素。使用 JavaScript 可以使这个过程变得简单，但我不会在本教程中使用它。

第 2 步 - 显示块元素

对于这一步，您可以按照自己的方式显示 div。您可以使它们在屏幕周围增长和缩小的圆圈，或形成正方形外部的矩形。对于这个示例，我只是将 div 显示为包含在 flex 容器中的正方形。 笔记： 我保存 div 元素的容器具有类“wave”。

这应该得到看起来像这样的东西，

第 3 步 — 添加动画和关键帧

现在是时候为它制作动画了。首先，我们需要添加 动画 属性给我们的 div。在我们设置 div 样式的地方，放 动画：无限增长2s缓入出局； 我放“成长”的地方是动画的名字。你可以随心所欲地制作它。 2s 是动画的长度。 缓进出 是缓动方法。您可以试验这些属性以获得独特的东西。最后 无穷 只是说我们希望动画永远重复。

接下来，我们需要创建关键帧。关键帧是我们指定如何为 div 设置动画的地方，或者我们希望如何将元素的属性从一个关键帧过渡到下一个关键帧。

这是我使用的：

请注意，我使用了 grow，这是我之前创建的动画的名称。您可以为您想要的任何属性设置动画，包括颜色和位置。对于本教程，我只是为大小设置动画。

现在它应该看起来像这样：

第 4 步 - 添加动画延迟

最后一步只是延迟 div 之间的动画。由于我们只使用 CSS，我们必须一次做一个。对于这个例子，我将每个元素之间的动画延迟设置为 0.2 秒。为此，我们使用 .wave div:nth-child(1) { 动画延迟：0s } . .wave div:nth-child(x) 选择我们容器内的第 x 个孩子，然后我们只添加动画延迟。每个 div 应该有不同的动画延迟。

现在 div 应该是动画的并且有动画延迟！ 您可以尝试使用属性和动画样式来创建很多整洁的东西。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/5880/13390100