jQuery Keyframes动画异常：元素点击后总是回到初始关键帧位置

我来帮你搞定这个每次点击按钮，巴士元素就跳回初始位置的问题！这其实是两个小细节导致的，咱们一步步修复：

问题根源 #

1. 动画结束后自动重置状态：默认情况下，CSS动画完成后会把元素样式恢复到动画前的初始状态，所以你的巴士在动画结束后会悄悄回到最开始的位置。
2. 变量与实际位置的同步风险：你依赖multiplier变量计算动画起始位置，但如果元素实际位置因为某些原因（比如动画未完成就点击按钮）和变量不一致，就会出现明显的跳转问题。

修复方案1：保留现有逻辑，添加状态保持 #

这个方案适配你当前的代码逻辑，只需要加一行关键配置，再初始化元素位置：

<style>
.pinJQ { 
    position: relative; 
    height: 20px; 
    width: 20px; 
    left: 0%; /* 初始化left为0%，避免第一次动画的突兀跳转 */
}
</style>
<script type="text/javascript">
var multiplier = 0;
$('#startpin').on('click', () => {
    var nextStation = multiplier + 9;
    
    $.keyframe.define([{
        name: 'pin-move',
        'from': { 'left': multiplier + '%' },
        'to': { 'left': nextStation + '%' },
    }]);
    
    $('#pin21').playKeyframe({
        name: 'pin-move',
        duration: '1s',
        delay: '0s',
        fillMode: 'forwards' // 核心配置：动画结束后保持最终位置
    });
    
    multiplier = nextStation;
})
</script>

修复方案2：动态读取当前位置（更可靠） #

如果担心变量和实际位置不同步，直接读取元素当前的left值作为动画起点，完全不依赖变量，稳定性更高：

<style>
.pinJQ { 
    position: relative; 
    height: 20px; 
    width: 20px; 
    left: 0%; /* 初始化位置，避免首次动画跳转 */
}
</style>
<script type="text/javascript">
$('#startpin').on('click', () => {
    // 获取当前left值，转成数字（如果没设置过则默认0）
    var currentLeft = parseFloat($('#pin21').css('left')) || 0;
    var nextStation = currentLeft + 9;
    
    // 用唯一名称定义关键帧，避免重复覆盖导致的冲突
    $('#pin21').playKeyframe({
        name: `pin-move-${Date.now()}`,
        duration: '1s',
        delay: '0s',
        fillMode: 'forwards',
        keyframes: {
            '0%': { 'left': `${currentLeft}%` },
            '100%': { 'left': `${nextStation}%` }
        }
    });
})
</script>

为什么这样能解决问题？ #

• fillMode: 'forwards' 是核心：它告诉浏览器动画结束后，保持元素在最后一帧的样式，不会回到初始状态。
• 初始化left: 0% 避免了第一次动画时，元素从默认的auto位置跳到0%的突兀感。
• 方案2的唯一关键帧名称，避免了每次点击覆盖同名关键帧可能带来的意外问题，同时完全基于元素实际位置计算，适配更多场景。

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