JavaScript 按百分比制作关键帧动画

Question

我正在尝试制作一个对象倾斜的动画，然后将其设置正确。我的 JavaScript 看起来像这样：

function animate-tip(){
  document.getElementById("x").animate(
  [0% { transform: "rotate(0deg)"},
   30% { transform: "rotate(30deg)"},
   100% { transform: "rotate(0deg)"}],
   {
     duration: 500,
     iterations: 1
   })

显然这是不正确的语法。我怎样才能让这个动画按百分比工作？

Answer 1

您可以使用 offset 属性来完成此操作。它必须介于 0 和 1 之间，因此只需除以 100 即可转换百分比。

function animateTip() {
  document.getElementById("x").animate(
    [{
        transform: "rotate(0deg)"
      },
      {
        transform: "rotate(30deg)", offset: 0.3,
      },
      {
        transform: "rotate(0deg)"
      }
    ], {
      duration: 3500,
      iterations: 1
    })
}

animateTip();

#x {
  padding: 10px;
  background: chartreuse;
  display: inline-block;
  width: 100px;
  height: 100px;
}

<div id="x"></div>