如何用这些简单的 CSS 技巧创建精美的展示动画

掌握技巧

无耻的插件

我跟你一样讨厌标题党文章，不过这篇文章可不是。所以，现在就让我来告诉你一些技巧，帮你节省10分钟的阅读时间。

使用 定义一些 CSS 动画@keyframes。设置元素的初始状态（opacity:0、scale(0) 等）。将元素的animationCSS 属性设置为你刚刚定义的动画之一。将动画的填充模式设置为前进。不要总是使用老套的ease计时函数，尝试一些更酷的cubic-bezier。使用 animation-delay 来协调整个动画。避免大范围的移动，保持动画简洁优雅。只使用transform和动画opacity。始终追求 60fps。

很简单吧？这与框架无关，因为元素animation插入 DOM 或其display属性从 visible 变为nonevisible 时才会触发。这是任何框架路由器的正常行为，因此无论您喜欢哪种前端堆栈，都可以顺利运行。

谢谢阅读。

等等，你似乎想要更多细节，更多内容。太好了，我也能做到。所以，在接下来的几段中，我会更详细地向你解释如何轻松实现上面展示的动画。

掌握技巧

显示数据头

我将通过逐步展示示例网站标题的过程来解释整个动画技术的工作原理。首先，我们确定需要独立动画的三个代理：

我们基本上有 3 个代理，希望它们在不同的时间点显示出来。我用蓝色标注了每个代理显示的时间偏移量。我们希望代理 1 和代理 3 从左侧微妙地淡入。对于代理 2，最好有一个从左到右的酷炫放大动画，就像线条从代理 1 流向代理 3 一样。让我们先定义核心 CSS 动画：

@keyframes fade-in-right {
  from {
    opacity: 0;
    transform: translateX(-15px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes grow-left {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

因为fade-in-right我们只需将元素的初始状态定义为隐藏并向左移动一点，而我们的最终状态将使元素完全不透明并将其放回到自然位置。看看我如何仅使用 15px 的移动范围。始终避免长距离移动；整个秘密在于小而微妙的运动。的代码grow-left几乎是不言自明的，所以我真的不必详细说明。这里很酷的一点是，我看到我只为以下两个 CSS 属性设置了动画：transform和。如果您真正致力于高性能、60fps 动画，opacity您可能需要阅读更多关于为什么应该避免为任何其他属性设置动画的信息。

现在我们已经定义了动画，接下来将其应用到代理上。在查看代码之前，需要记住三件重要的事情：

1. 在元素的默认 CSS 属性中设置元素的初始状态
2. 使用前进作为动画的填充模式，以便它保留其最终状态
3. 通过动画延迟来安排显示

.agent-1, .agent-3 {
  opacity: 0;
  animation: fade-in-right ease 0.4s forwards;
}

.agent-2 {
  transform: scaleX(0);
  transform-origin: left;
  animation: grow-left cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.5s forwards;
  animation-delay: 0.4s;
}

.agent-3 {
  animation-delay: 0.8s;
}

看看我们如何将代理 1 和 3 的初始状态定义为，opacity: 0因为我们希望它们在淡入过渡效果出现之前保持隐藏状态。然后，我们将动画设置为之前定义的动画，fade-in-right并使用经典的ease函数和forwards填充模式。由于我们仍然希望代理 3 进入场景，因此稍后我们设置了一个，这意味着动画将在元素放置在 DOM 上或通过属性animation-delay: 0.8s使其可见后 800 毫秒才会启动。display

现在，对于代理 2，情况略有不同。初始状态设置为，transform: scaleX(0)否则我们的元素将完全放大显示，直到动画开始。所以，通过设置初始设置，我们可以在动画触发之前指示元素的渲染方式。然后我们设置它的transform-origin: left属性，使线条从左到右放大，否则，它的锚点默认为中心。然后我们执行与代理 1 和 3 类似的操作animation: grow-left，将其填充模式设置为forwards，并确保它在 DOM 中渲染 0.4 秒后才显示出来。这里有趣的一点是，我们没有使用默认ease函数作为动画计时函数，而是定义了一个自定义cubic-bezier函数。这使我们能够创建比浏览器默认转换更有趣、更具视觉吸引力的转换。继续尝试cubic-bezier使用这个有趣的工具定义您自己的转换。

我们来看看最终的结果：

很酷吧？看看animation-delay现在情况有多合理，而且代理 1 和 3 都有相同的显示动作。找到合适的动画时长和动画延迟需要反复试验，所以不用太过纠结，尽情享受吧。

告诉我body现在

由于相同的技术一遍又一遍地重复，对其余内容进行动画处理确实毫无意义：

1. 确定代理人并披露时间
2. 创建适当的动画
3. 设置代理的初始状态
4. 为每个代理设置动画并通过适当的动画延迟进行编排
5. 通过反复试验来调整动画
6. 利润

很酷，但是，你知道，#perfmatters

是的，性能很重要，这就是为什么我们努力只使用transform和 来运行整个流程opacity。这些属性只会在浏览器渲染过程中触发合成，从而避免计算工作，最终带来无卡顿的体验。

让我们对揭示动画进行性能分析：

你继续看那个绿色条。这意味着我们在整个动画中 99% 的时间都达到了 60fps。每秒 60 帧（抱歉，我对此感到非常自豪）。它的性能真的不能再好了。请记住，即使使用 CSS 黄金属性，动画元素（本文中称为代理）越多，你的应用看起来就越卡顿。这是因为每个动画都会不可避免地增加一些 GPU 负载。所以，尽量限制动画元素的数量，但始终努力达到 60fps 的目标。

魔法太多

“我真的没有那么有创造力，想不出这么花哨的动画”

打造出色的动画并非技术娴熟，而是需要良好的设计感和与生俱来的创作动力，才能打造出优秀的UI交互。这可能非常困难，只有最有才华的设计师才拥有足够的创造力来完成这项壮举。然而，我们凡人仍然可以通过模仿并从真正的专业人士那里汲取尽可能多的灵感来学习。为此，我建议您经常访问Awwwards或Dribbble等网站，并查看一些关于酷炫页面展示动画的创意。

真心希望你读完这篇文章后，对展示动画的恐惧感能消除。它并非如你所见那般复杂，但如果做得好，它肯定能为你的应用增添一抹惊艳，而这正是目前所缺少的。所以，赶紧在你的网站上创建一些酷炫的动画吧，然后把你的想法发到@caroso1222给我！

如果您从本文中获得了任何启发，请通过点击那些心形和独角兽来表达您的爱意，或者留下评论。

无耻的插件

除了软件，我还撰写有关职业发展、编程面试和远程工作的文章。如果您喜欢我的内容，请关注我，随时关注我的帖子和讨论！

• 请不要在你的简历中这样做
• 我是如何进入最独家的远程工作平台的
• 这是你在顶级远程工作平台上真正能赚到的钱（+10 万美元）
• 讨论：开发人员应该在空闲时间编写代码吗？
• 讨论：作为一名初级员工，你是如何找到第一份工作的？