为何JS Animation与CSS Animation表现不同？JS动画出现跳变

两者效果不一致的核心是CSS动画和Element.animate()对缓动函数的应用逻辑完全不同：

• CSS动画：你指定的cubic-bezier缓动是作用在每一段相邻关键帧的过渡上。比如你的动画分为三段：0%-90%、90%-95%、95%-100%，前一段和后一段会各自用这个缓动函数平滑过渡，中间90%-95%因为值不变，自然保持静止，整体效果连贯。
• Element.animate()：你在options里设置的easing是作用在整个动画的时间线上，而非单个关键帧段。这会导致整个动画的进度被这个缓动曲线扭曲——原本0.9到0.95的5%时间，在缓动作用下实际分配的时间被压缩，加上两个关键帧之间的位移差很小，就会出现跳变的视觉效果。

修复方法 #

要让JS动画和CSS效果一致，需要把缓动函数单独应用到需要过渡的关键帧段，同时让整个动画的时间线保持线性：

myRef.current.animate(
    [
        {transform: `translatey(32.5px)`, offset: 0}, 
        // 给0-90%的过渡段设置缓动
        {transform: `translatey(-2260px)`, offset: 0.9, easing: 'cubic-bezier(0.33, 1, 0.68, 1)'},
        {transform: `translatey(-2260px)`, offset: 0.95}, 
        // 给95-100%的过渡段设置缓动
        {transform: `translatey(-2247.5px)`, offset: 1, easing: 'cubic-bezier(0.33, 1, 0.68, 1)'}
    ], 
    {
        duration: 4000,
        fill: 'forwards',
        iterations: 1,
        easing: 'linear' // 整个动画用线性时间线，确保各段缓动独立生效
    }
)

这样修改后，JS动画的每段过渡逻辑就和CSS完全匹配，不会再出现跳变。

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