网络动画 api 和 css3 关键帧之间的区别？

Question

我发现 css3 关键帧和网络动画之间的区别 api 试试这个演示 https://code.h5jun.com/pizi/edit?html,css,js,output

相同选项：

@keyframes test { 
  0% { transform: translateX(0px) translateY(0px);} 
  20% { transform: translateX(0px) translateY(50px);} 
  40% { transform: translateX(0px) translateY(100px);} 
  60% { transform: translateX(0px) translateY(150px);} 
  80% { transform: translateX(0px) translateY(200px);} 
  100% { transform: translateX(0px) translateY(300px);} 
}

网页动画api版本：

block.animate([
    {transform: 'none'},
    {transform: 'translateY(100px)', offset: 0.2},
    {transform: 'translateY(200px)', offset: 0.4},
    {transform: 'translateY(300px)', offset: 0.6},
    {transform: 'translateY(400px)', offset: 0.8},
    {transform: 'none'},
  ], {
    duration: 5000,
    easing: 'ease',
  })

但结果完全不同，我不知道为什么

Answer 1

在 CSS 动画中，在每个关键帧之间应用缓动。任何未指定显式 animation-timing-function 的关键帧都会从应用它的元素中获取计算的 animation-timing-function。

由于 animation-timing-function 的初始值为 ease，当您应用动画时，它会扩展为：

@keyframes test {
  0% {
    transform: translateX(0px) translateY(0px);
    animation-timing-function: ease;
  }
  20% {
    transform: translateX(0px) translateY(50px);
    animation-timing-function: ease;
  }
  40% {
    transform: translateX(0px) translateY(100px);
    animation-timing-function: ease;
  }
  60% {
    transform: translateX(0px) translateY(150px);
    animation-timing-function: ease;
  }
  80% {
    transform: translateX(0px) translateY(200px);
    animation-timing-function: ease;
  }
  100% {
    transform: translateX(0px) translateY(300px);
    /* Note that specifying a timing function for an 100% / to
     * keyframe has no effect since it applies until the _next_
     * keyframe. */
  }
}

另一方面，

Web Animations 允许您在关键帧级别或整体级别上指定缓动动画（或两者！）。当您为整个动画指定它时，它会在所有关键帧上运行，而不是在它们之间单独运行。

在您的示例中，您正在为整个动画设置缓动：

block.animate(
  [
    { transform: 'none' },
    { transform: 'translateY(100px)', offset: 0.2 },
    { transform: 'translateY(200px)', offset: 0.4 },
    { transform: 'translateY(300px)', offset: 0.6 },
    { transform: 'translateY(400px)', offset: 0.8 },
    { transform: 'none' },
  ],
  {
    duration: 5000,
    easing: 'ease', // <-- Whole animation easing
  }
);

要在每个关键帧上指定它，您可以这样写：

block.animate(
  [
    { transform: 'none', easing: 'ease' },
    { transform: 'translateY(100px)', easing: 'ease', offset: 0.2 },
    { transform: 'translateY(200px)', easing: 'ease', offset: 0.4 },
    { transform: 'translateY(300px)', easing: 'ease', offset: 0.6 },
    { transform: 'translateY(400px)', easing: 'ease', offset: 0.8 },
    { transform: 'none' },
  ],
  5000
);

或者更简单地说：

block.animate(
  {
    transform: [
      'none',
      'translateY(100px)',
      'translateY(200px)',
      'translateY(300px)',
      'translateY(400px)',
      'none',
    ],
    easing: 'ease',
  },
  5000
);

（尽管某些浏览器的旧版本可能不支持最后一种语法。）

网络动画 api 和 css3 关键帧之间的区别？

Difference between web animation api and css3 keyframe?

css

css-animations

web-animations