多目标动画

使用 CSS 选择器定位一个或多个 DOM 元素，允许在单个 animate() 调用中为多个目标设置动画，并支持 stagger() 方法。

语法比较

Anime.js

waapi.animate('.circle', {
  translate: '100px',
  delay: stagger(100),
});

WAAPI 等效项

document.querySelectorAll('.circle').forEach(($el, i) => {
  $el.animate({
    translate: '100px',
  }, {
    duration: 1000,
    delay: i * 100,
    easing: 'ease-out',
  }).finished.then(() => {
    $el.style.translate = '100px';
  })
});

接受

document.querySelectorAll() 接受的任何 String