如何让图片浮动动画更流畅？解决动画末端抖动问题

抖动的核心原因是使用top属性做动画触发了浏览器频繁重排，且关键帧设置的衔接逻辑容易导致过渡不平滑。以下是具体修复方案：

优化方案1：改用transform替代top属性 #

top属于布局属性，动画时会强制浏览器重新计算布局，容易引发抖动；transform是合成属性，由GPU加速处理，性能更稳定。同时简化关键帧逻辑，让过渡更流畅：

.newImg {
    position: relative;
    width: 472px;
    height: 414px;
    animation: updown 5s ease-in-out infinite;
    /* 提示浏览器提前优化动画元素，减少卡顿 */
    will-change: transform;
}

@keyframes updown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(8px);
    }
}

优化方案2：用alternate简化动画逻辑 #

如果想要和原动画完全一致的“上下上下”循环效果，可以利用animation-direction: alternate简化代码，避免重复关键帧：

.newImg {
    position: relative;
    width: 472px;
    height: 414px;
    /* 动画时长减半，配合alternate实现5秒一个完整循环 */
    animation: updown 2.5s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes updown {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(8px);
    }
}

这两种方案都能彻底解决动画结束时的抖动问题，同时提升动画的整体流畅度。

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