如何在JavaScript的Element.animate()中修改animation-timing-function

正确设置方法 #

你之前用的animationTimingFunction是CSS属性名，但在Element.animate()的配置对象中，对应的属性名是easing，直接在animationOptions里添加这个属性就能实现需求：

// 定义动画关键帧
const animationKeyframes = [
    {transform: 'translateY(-100%)'},
    {transform: 'translateY(0%)'}
]

// 配置动画选项，添加easing属性指定时序函数
const animationOptions = {
    duration: 1000,
    iterations: 1,
    easing: 'ease-in-out'
}

// 执行动画（替换成你目标div的选择器）
document.querySelector('.target-div').animate(animationKeyframes, animationOptions)

如果需要给不同关键帧区间设置不同的时序函数，也可以直接在关键帧对象里单独指定：

const animationKeyframes = [
    {transform: 'translateY(-100%)', easing: 'ease-in'},
    {transform: 'translateY(0%)', easing: 'ease-out'}
]

之前尝试无效的原因 #

• animationTimingFunction不是Element.animate()配置对象的合法属性，正确的属性名是easing
• 给元素添加CSS的animation-timing-function不会影响Element.animate()创建的动画，因为这个API生成的是独立的Web Animations实例，不继承元素的CSS动画时序配置

内容的提问来源于stack exchange，提问作者user21068478