web animation API 锋利的css动画控制器 (更新中）

冬阳春晖2025-05-12 15:48

什么是web animation api 以及为什么要使用web animation api？

web animation API 是web页面中控制DOM元素动画效果的javascript原生API。

它能够逐个关键帧控制动画效果，
具有Timeline 机制‌能通过javascript来实现动画的暂停，播放，回溯等功能
能够通过javascript的事件监听动画的播放与完成，对动画的控制具有极高的细粒度。
另外它共用css animation的渲染引擎，所以具有极高的性能。

如何使用

基本使用方式

最直观的使用方式是

javascript 复制代码

const myAnimation = document.getElementById('id').animate(AnimationEffect,Options)

直接调用某个dom元素的animate函数，其中

AnimationEffect 即keyframes object，等同于在css中使用 @keyframes
Options里面是当前effect的配置项，常用配置项主要有：duration 动画播放时长， delay 时间延迟多久开始播， easing: 动画缓解曲线， iterations 播放次数

css 复制代码

#alice {
  animation: aliceTumbling infinite 3s linear;
}

@keyframes aliceTumbling {
  0% {
    color: #000;
    transform: rotate(0) translate3D(-50%, -50%, 0);
  }
  30% {
    color: #431236;
  }
  100% {
    color: #000;
    transform: rotate(360deg) translate3D(-50%, -50%, 0);
  }
}

以上css我们可以使用如下js进行覆盖

javascript 复制代码

const myAnimation = document.getElementById("alice").animate(
  [
    { transform: "rotate(0) translate3D(-50%, -50%, 0)", color: "#000" },
    { color: "#431236", offset: 0.3 },
    { transform: "rotate(360deg) translate3D(-50%, -50%, 0)", color: "#000" },
  ],
  {
    duration: 3000,
    iterations: Infinity,
  },
);

myAnimation.pause()

如果是通过上述方式实现（即 element.animate(...)) 会立马执行animation若想随后执行需要调用pause： myAnimation.pause() 然后在需要调用的时机执行: myAnimation.play()

Group Animation

待续

最佳实践

待续