Javascript 动态加速后从同一点恢复css动画

在用户滚动上，我通过添加一个加速类来提高下面滑块的速度1秒。这个很好用。我很难让它从加速班离开的同一点滑下来

请告知

var photos=document.querySelector（“.photos”）；
photos.innerHTML+=photos.innerHTML；
photos.onwheel=功能（）{
照片。类列表。添加（“加速”）；
var t=setTimeout（（）=>{
照片。类列表。删除（“加速”）；
清除超时（t）；
}, 1000);
};
html，
身体{
溢出：隐藏；
}
.包装纸{
溢出：隐藏；
位置：固定；
排名：0；
左：0；
z指数：2；
背景色：#fff；
}
.包装纸.照片{
显示器：flex；
高度：100vh；
对齐项目：居中；
动画：幻灯片50秒线性0秒无限；
}
@关键帧滑动{
0% {
变换：translateX（0）；
}
100% {
转化：translateX（-50%）；
}
}
.wrapper.photos.speedup{
动画持续时间：1s；
}
我认为您必须使用JS构建动画才能实现您想要的效果。以下是一个基本示例：


var因子=0.1；/*这将控制速度*/
无功电流=0；
var photos=document.querySelector（“.photos”）；
photos.innerHTML+=photos.innerHTML；
photos.onwheel=函数（）{
系数=0.2；
var t=setTimeout（（）=>{
系数=0.1；
清除超时（t）；
}, 1000);
};
函数重复次数（）{
电流+=系数；
如果（当前>=50）{
电流=0；
}
photos.style.transform=“translateX（-“+当前+”）”；
requestAnimationFrame（经常重复）；
}
requestAnimationFrame（经常重复）
html，
身体{
溢出：隐藏；
}
.包装纸{
溢出：隐藏；
位置：固定；
排名：0；
左：0；
z指数：2；
背景色：#fff；
}
.包装纸.照片{
显示器：flex；
高度：100vh；
对齐项目：居中；
变换：translateX（0）；
}