世界上第一个可用于React、Vue、纯HTML和CSS的可组合CSS动画工具包— AnimXYZ

什么是AnimXYZ？

AnimXYZ是一个CSS动画库，用于为你的网站创建自定义CSS动画。是什么让AnimXYZ如此之好，它是可组合的，这意味着你可以组合和混合不同的动画来创建自己的高度可定制的CSS动画，而无需编写一个单一的关键帧。

例如，你可以通过编写 xyz = "fade big up" 来创建动画，该动画可以使用AnimXYZ淡入淡出，按比例放大和向上移动。

AnimXYZ还有一个小软件包，基本功能是 2.68kb，如果包含方便的实用程序，则是 11.4kb。

可定制性

AnimXYZ是由CSS变量驱动的，AnimXYZ允许你覆盖任何一个CSS变量来进一步定制/控制动画和几乎无限数量的自定义动画。

你可以通过在你的CSS中选择带有 xyz 属性的元素来编辑一个AnimXYZ CSS变量，并改变一个已定义的AnimXYZ变量的值，就像这样：

.my-class-name {
  --xyz-opacity: 0.5;
}

所有AnimXYZ变量的开头都带有xyz前缀，然后通常后面跟随CSS属性名称。

嵌套动画

AnimXYZ支持嵌套动画，这允许我们在我们的动画元素（带有 xyz 属性的元素）中包裹多个元素来制作动画。嵌套动画看起来像这样：

<div class="my-class-name" xyz="fade">
  <div class="xyz-in">Hello</div>
  <div class="xyz-in">Hello</div>
  <div class="xyz-in">Hello</div>
</div>

这将使所有包裹着 .my-name-element 的元素同时淡入。

错位动画

如果我们不想让嵌套动画同时发生，我们很幸运，因为AnimXYZ也支持错位动画，这意味着如果我们有一个嵌套动画，我们可以让每个元素一个接一个地到达/离开。我们可以通过在 xyz 属性中添加 stagger 来实现这一点，这将使动画从左到右错开，我们也可以通过使用 stagger-rev 来反转错开，所以现在它将从右到左错开。

文档

• AnimXYZ.com
• AnimXYZ Docs

原文：blog.zhangbing.site/2021/01/11/…

开源推荐系列

• 2021年管理Monorepo代码库的11种出色工具
• 开源推荐|10个惊人的复古CSS套件
• 开源推荐|Vue.js轮播库热门精选
• 开源推荐|19个前端开发人员的救生工具
• 开源推荐|10+个很酷的Vue.js组件，模板和demo示例
• 开源推荐|JSONsite：使用JSON文件创建SPA页面
• 开源推荐|使用GPU.js改善JavaScript性能
• 开源推荐|如何将HTML表格转换成精美的PDF，几种方案比较
• 开源推荐|我不能没有的5个Vue.js库
• 开源推荐|8个JavaScript库可更好地处理本地存储
• 开源推荐|Node开发神器：使用Llama Logs实时可视化Node错误
• 开源推荐|你应该了解的23个极为有用的NodeJS库
• 开源推荐|10个漂亮的VSCode浅色（Light）主题
• 开源推荐|2019年的6个JavaScript用户认证库
• 开源推荐|哪些UI库支持暗模式？
• 开源推荐|5个你不知道的JavaScript字符串处理库
• 开源推荐|9个适用于Web开发人员的CSS工具
• 开源推荐|除了阿里的iconfont图标库，还有这10个开源SVG图标库
• 7个很棒的JavaScript产品步骤引导库，不信你用不上