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>