Web animation API improvements in Chromium 84

基础概念：把 CSS 换成 JS

@keyframes openAnimation {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

换成

const openAnimation = [
  { transform: 'scale(0)' },
  { transform: 'scale(1)' },
];

.modal {
  animation: openAnimation 1s 1 ease-in;
}

换成

document.querySelector('.modal').animate(
    openAnimation, {
      duration: 1000, // 1s
      iterations: 1, // single iteration
      easing: 'ease-in' // easing function
    }
);

新的功能

1. 能监听 animation.ready 和 animation.finished

2. New transitions can be triggered while existing ones are still running.

可以在现有转换仍在运行时触发新转换。这个好！要自己实现会很复杂

3. 可替换动画的性能改进

elem.addEventListener('mousemove', evt => {
 rectangle.animate(
   { transform: translate(${evt.clientX}px, ${evt.clientY}px) },
   { duration: 500, fill: 'forwards' }
 );
});

例子中，mousemove 会触发非常多次，而最新的 animation 会被优化。

如果自己实现，会需要 requestAnimation 来控制。

4. 其他功能
animation.replaceState()， animation.commitStyles()， animation.persist()

5. composite mode

有 3 种模式： replace, add, accumulate

大概是说如果有多个 animation 要混着用，你可以选择不同的模式去执行。

Link

• https://web.dev/web-animations/