AnimXYZ

有 不少 CSS 动画库。它们往往是一堆类名，您可以根据需要应用它们，例如“bounce”或“slide-right”，它们会… 做这些事情。它们往往具有非常有见地的不错的默认值，而不是专门为自定义而设计。

看起来 AnimXYZ 被设计为高度可定制的，它自称为“第一个可组合的 CSS 动画工具包”。

您可以根据需要使用尽可能多的不同的可组合位来获得所需的进出动画。使用他们的构建器，您将看到类似于以下的输出

<div
  class="square-group"
  xyz="tall-2 duration-6 ease-out-back stagger-1 skew-left-2 big-25% fade-50% right-5"
>
  <div class="square xyz-out"></div>
  <div class="square xyz-out"></div>
  <div class="square xyz-out"></div>
</div>

类名 xyz-out 变为 xyz-in 以触发相反的动画。

我不喜欢库使用虚构的 HTML 属性来控制自己。Web 标准不太可能在将来使用 xyz，但谁知道呢，如果这种情况在足够多的生产站点中发生，那么这扇门将永远关闭。但更糟糕的是，它鼓励其他库也这样做。

所有这些属性值都让人想起 Tailwind。要有效地使用 Tailwind，构建过程会运行 PurgeCSS 以删除所有未使用的类，这些类将服务于 Tailwind 提供的完整类集的一小部分。我想到这一点是因为 AnimXYZ 的处理过的样式表是 ~9.7 kB 压缩的，这大于 Tailwind 在其营销页面上用作 示例 的文件大小。重点是，如果使用类，可能会有更直接的方法来清除未使用的类，我敢打赌这会使大小几乎可以忽略不计。也许 JavaScript 框架特定的用法更聪明。

但撇开这些批评不谈，它很酷！不仅有高度可组合的智能默认值，您还可以通过 CSS 自定义属性完全控制。

不要错过网站右下角的 XYZ-ray 按钮，它可以让你看到哪些动画为哪些元素提供动力。它也在文档中，非常棒。

声明式动画确实很不错。 我记得和 Matt Perry 聊天 关于 Framer Motion，并且喜欢它的方法。