Javascript 动画等待完全完成以重新开始

为什么动画结束时会有延迟？我想不出来。当它完成第一部分时，即使所有块的宽度等于300px，它执行第二部分以将其返回到50px，然后它等待整个动画结束，并且仅在这之后才开始另一个循环。有没有办法使块异步？这样他们就不会等待其他块完成动画

动画({
目标：'.b-main>div'，
宽度：[
{值：300，持续时间：1200}，
{值：50，持续时间：1200}
],
放松：“轻松返回”，
持续时间：5000，
延迟：功能（el、i、l）{
返回i*300；
},
循环：正确
});
.b-main>div{
背景色：红色；
宽度：50px；
高度：50px；
利润率：20px；
}
您有一个从0%到100%的动画；在0%时，所有块都处于静止状态；也是百分之百,；因此，延迟

最明显的方法是将一个动画拆分为四个，以便块是独立的：


const targets=document.queryselectoral（'.b-main>div'）；
targets.forEach（（target，i）=>
设置超时（（）=>
动画({
目标:目标,，
宽度：[
{值：300，持续时间：1200}，
{值：50，持续时间：1200}
],
放松：“轻松返回”，
持续时间：5000，
循环：正确
}),
i*300
)
);
.b-main>div{
背景色：红色；
宽度：50px；
高度：30px；
利润率：10px；
}
完美。在anime.js库中有什么方法可以做到这一点吗？创建一个超时看起来很奇怪，虽然我没有考虑过这一点，但似乎是目前为止唯一可行的解决方案。我知道还有动画。交错（100）
，但它也是一样的，每个循环结束时都会有延迟。