这是代码的链接，它不太长，54 行 + HTML：
https://codepen.io/Yonkai/pen/YrdNqE?editors=0100
我遇到的问题是我不明白这条线是如何工作的，在第 22 行：
--m-ini: calc(var(--i, 0) - #{$p});
在上下文中，我不知道如何处理 --i (index) 自定义 CSS 变量或访问这些索引，如何通过动画中的每个调用选择每个索引？（从 SASS 编译）：
.ball:nth-child(2) {
--i: 1;
}
.ball:nth-child(3) {
--i: 2;
}
.ball:nth-child(4) {
--i: 3;
}
.ball:nth-child(5) {
--i: 4;
}
.ball:nth-child(6) {
--i: 5;
}
.ball:nth-child(7) {
--i: 6;
}
.ball:nth-child(8) {
--i: 7;
}
.ball:nth-child(9) {
--i: 8;
}
.ball:nth-child(10) {
--i: 9;
}
.ball:nth-child(11) {
--i: 10;
}
.ball:nth-child(12) {
--i: 11;
}
.ball:nth-child(13) {
--i: 12;
}
.ball:nth-child(14) {
--i: 13;
}
.ball:nth-child(15) {
--i: 14;
}
.ball:nth-child(16) {
--i: 15;
}
我相信这与 calc() 或 var() 和自定义变量的功能无关，但老实说我傻眼了。
这是基于其他人的代码，他们有一个 youtube 视频，但没有太大帮助。