AnimXYZ 可为网站创建、自定义和组合动画。由 CSS 变量提供支持，无需编写单个关键帧即可实现几乎无限数量的独特动画。节省时间并完全控制元素的移动方式。到时候可以考虑是否引入项目中，满足游戏项目的ui库

优势

1、css变量提供支持，允许几乎无限数量的独特动画而无需编写单个关键帧。
2、即插即用：支持vue、react、SCSS 和 CSS 构建
3、高性能：AnimXYZ有一个小软件包，基本功能是 2.68kb，如果包含方便的实用程序，则是 11.4kb
4、更少的代码：强大的 CSS 动画，无需自定义关键帧，可满足各种微妙的动画需求。更少的烦恼 = 更多的乐趣。
5、可组合：通过类名进行动画组合

演示案列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@animxyz/core">
    <style>
    .example-grid {
    --grid-columns: 4;
    --grid-item-size: 4rem;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns),var(--grid-item-size));
    justify-content: center;
    margin: 0 auto
}
.example-grid .circle,.example-grid .item-block,.example-grid .square,.example-grid .triangle {
    height: var(--grid-item-size);
    width: var(--grid-item-size);
    background: red;
}
.item-block .circle,.item-block .square,.item-block .triangle {
    height: 100%;
    width: 100%
}
.circle,.example-wrap,.square,.triangle {
    align-items: center;
    display: flex;
    justify-content: center
}
    </style>
</head>
<body>
<div class="example-grid" xyz="fade small stagger">
    <div class="square xyz-out"></div>
    <div class="square xyz-out"></div>
    <div class="square xyz-out"></div>
    <div class="square xyz-out"></div>
    <div class="square xyz-out"></div>
    <div class="square xyz-out"></div>
    <div class="square xyz-out"></div>
    <div class="square xyz-out"></div>
</div>

</body>
</html>

配置

具体配置可查看官网：animxyz

animxyz动画库使用

优势

演示案列

配置