Javascript 缩放属性（anime.js）未应用于我的页面

当使用amine.js时，scale对我不起作用，理论上，文本应该是第一位的 比例：0.5 之后 字母间距：“10px” 返回 比例：1 字母间距：“6px” 但只有字母间距起作用 缩放不会以任何方式显示在页面上

代码： html

学生联盟
学生联盟
学生联盟
学生联盟
学生联盟
学生联盟
学生联盟
学生联盟
学生联盟
学生联盟

js

“从导入字母大小”https://cdn.skypack.dev/letterizejs@2.0.0";
常量测试=新字母大小({
目标：“.为我设置动画”
});
const animation=anime.timeline({
目标：test.listAll，
延迟：动画。交错（100{
网格：[test.list[0]。长度，test.list.length]，
来自：“中心”
}),
循环：正确
});
动画
.添加({
比例：0.5
})
.添加({
字母间距：“10px”
})
.添加({
比例：1
})
.添加({
字母间距：“6px”
});

---

谢谢

letteize.js在字母周围注入span，span是

display:inline

这就是问题所在，因为变换属性仅适用于

display:inline block

和

display:block

元素

为了解决这个问题，我添加了一些css，将注入的跨距样式设置为

内联块

.animate-me span {
  display: inline-block;
}

在这里查看：

有关内联元素无法转换原因的更多详细信息：

<script type="module">
        import Letterize from "https://cdn.skypack.dev/letterizejs@2.0.0";
            const test = new Letterize({
                targets: ".animate-me"
            });

            const animation = anime.timeline({
                targets: test.listAll,
                delay: anime.stagger(100, {
                    grid: [test.list[0].length, test.list.length],
                    from: "center"
                }),
                loop: true
            });

            animation
                .add({
                    scale: 0.5
                })
                .add({
                    letterSpacing: "10px"
                })
                .add({
                    scale: 1
                })
                .add({
                    letterSpacing: "6px"
                });
    </script>

.animate-me span {
  display: inline-block;
}