Как я могу использовать Anime.js для создания множества волн, которые распространяются наружу от центра, постепенно стан ⇐ CSS

[Anonymous]

Когда я создаю анимацию с бесконечным циклом с помощью CSS, эффект не соответствует эффекту, созданному с помощью Anime.js.
Когда я создаю анимацию с бесконечным циклом с помощью CSS, каждый цикл получается бесшовным. Однако когда я создаю анимацию с помощью Anime.js, в конце каждого цикла анимации возникает пауза.
Я хочу использовать Anime.js для достижения анимации, соответствующей CSSЭтого эффекта я достиг с помощью CSS:








.box {
display: flex;
position: relative;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
}

.box-item {
animation: animate 3s linear infinite;
animation-delay: calc(1s * var(--i));
position: absolute;
box-sizing: border-box;
border-radius: 100%;
background: #e5f6ff;
box-shadow: inset 0 0 40px 20px;
}

@keyframes animate {
0% {
width: 0;
height: 0;
opacity: 1;
}

100% {
width: 300px;
height: 300px;
opacity: 0;
}
}


Вот такого эффекта я добился с помощью аниме js:
const boxItems = document.querySelectorAll(".box-item");

anime({
targets: boxItems,
easing: "linear",
duration: 3000,
loop: true,
keyframes: [
{ width: 0, height: 0, opacity: 1 },
{ width: 300, height: 300, opacity: 0, easing: "linear" },
],
delay: anime.stagger(500),
});










.box {
display: flex;
position: relative;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
}

.box-item {
position: absolute;
box-sizing: border-box;
border-radius: 100%;
background: #e5f6ff;
box-shadow: inset 0 0 40px 20px;
}



Подробнее здесь: https://stackoverflow.com/questions/790 ... from-the-c