反向垂直roulette轮播动画启动初始延迟过高如何解决？

问题原因 #

延迟是原实现给每个.carousel__item设置了递增的正向animation-delay导致的，当你将动画设为反向播放时，原本的正向延迟会让动画先等待完整的延迟周期走完，才会播放到可见画面，条目越多、总动画时长越长，启动延迟就越明显。

解决方法（两种可选，推荐第一种） #

方案1：直接修改@keyframes定义（兼容性好，逻辑直观） #

不要通过animation-direction: reverse修改方向，直接把原动画的关键帧起止状态互换，即可实现反向旋转，同时保留原本的延迟逻辑，不会出现启动延迟：
找到原CSS中的@keyframes carousel-animate-vertical规则，将所有translateY的正负值互换，再删掉你之前添加的animation-direction: reverse;属性即可。

方案2：保留reverse属性，修改动画延迟为负值 #

如果不想改动关键帧定义，可以将每个.carousel__item的animation-delay改为对应负值，强制动画直接跳转到对应时间点开始播放，无需等待。
假设总动画时长为$animation-timing，共有$item-count个条目，第n个子项原本的延迟为calc(n * ($animation-timing / $item-count))，修改后为：

animation-delay: calc(-1 * n * ($animation-timing / $item-count));

修改后的代码参考 #

采用方案1的话，你的.carousel__item代码调整为：

.carousel__item {
  display: flex;
  align-items: center;
  position: absolute;
  width: 100%;
  padding: 0 12px;
  opacity: 0;
  filter: drop-shadow(0 2px 2px #555);
  will-change: transform, opacity;
  animation: carousel-animate-vertical $animation-timing linear infinite;
}

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