CSS Animation 与 Web Animation API 之争

下面是与之对应的 WAAPI 代码：

var keyframes = [
  { 
    transform: 'translateY(-1000px) scaleY(2.5) scaleX(.2)', 
    transformOrigin: '50% 0',
    filter: 'blur(40px)',
    opacity: 0 
  },
  { 
    transform: 'translateY(0) scaleY(1) scaleX(1)',
    transformOrigin: '50% 50%',
    filter: 'blur(0)',
    opacity: 1 
  }];

我们已经看到将它应用到任何想要添加动画的元素上是多么的简单：

element.animate(keyframes, 700);

考虑到动画的简单，我仅仅为它指定了 duration。然而，我们还可以在第二个参数中传递更多的选项。至少，我们可以指定一个缓动方式。下面是一个完整的配置项列表：

var options = {
  iterations: Infinity,
  iterationStart