0

I found out a difference between css3 keyframes and web animation api try this demo https://code.h5jun.com/pizi/edit?html,css,js,output

same options:

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

web animation api version:

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',
  })

but the result are totally different and i don't know why

4

1 回答 1

2

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

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

于 2018-07-31T22:38:53.243 回答