web动画api和css3关键帧的区别？答案

【问题标题】：Difference between web animation api and css3 keyframe?web动画api和css3关键帧的区别？
【发布时间】：2018-08-01 06:38:53
【问题描述】：

我发现了 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',
  })

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

【问题讨论】：

标签： css css-animations web-animations

【解决方案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 动画允许您在任一关键帧级别或在整个动画级别（或两者！）上指定缓动。当您为整个动画指定它时，它会在所有关键帧上运行，而不是在它们之间单独运行。

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

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
);

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

【讨论】：