使用@keyframes制作图标垂直正向无限循环切换动画时反向回溯问题求助

• 你当前编写的关键帧只定义了「从青蛙图标位置位移到小鸟图标位置」的两段停留与位移逻辑，完全没有定义动画执行到36%（最后一个自定义关键帧）之后到100%阶段的状态。
• CSS 动画会自动为未定义的区间补全过渡逻辑：当走到自定义的最后一个关键帧（36%，值为translateY(-45px)）后，会自动平滑过渡到关键帧默认的初始状态（也就是0%位置的translateY(0)），这部分反向滑回的过程，就是你看到动画走完青蛙到小鸟的阶段后，又自动回溯回青蛙图标的根源。
• 要实现持续正向、无限循环的垂直切换效果，核心要做到两点：补全全周期关键帧的位移逻辑，保证循环首尾的视觉状态完全对齐，让动画的衔接跳变用户无法感知。

1. 调整动画关键帧，补全100%位置的位移值，彻底取消自动回弹的过渡逻辑（可以直接沿用你原来的rotate关键帧名，替换内部逻辑即可）：

   @keyframes rotate {
     /* 初始状态：停在青蛙位置，等待短暂展示 */
     0%, 12% {
       transform: translateY(0);
     }
     /* 位移到小鸟位置，平滑滑动后停留展示 */
     25%, 37% {
       transform: translateY(-45px);
     }
     /* 补全后半段位移：继续向上滑动，直到视觉上回到青蛙的位置 */
     50%, 100% {
       transform: translateY(-90px);
     }
   }
   

2. 调整图标容器的结构支撑无缝循环：
   • 把原本两个图标的垂直排列顺序调整为：青蛙图标 → 小鸟图标 → 复制一份和第一个完全一致的青蛙图标，三个图标垂直居中对齐，单图标所占高度刚好为45px。
   • 因为复制的青蛙图标和第一个青蛙外观完全一致，当容器位移到translateY(-90px)位置时，露出的恰好是复制的青蛙图标，视觉上和初始位置的青蛙没有任何区别，这时候动画循环重置回translateY(0)的跳变完全不会被用户感知。
3. 配套动画属性设置：
   • 给图标滚动容器设置动画属性：animation: rotate 3s linear infinite;，用线性运动保证位移过程速度均匀，不会出现节奏卡顿。
   • 在外层可视区域的父元素上加上overflow: hidden;，裁切掉滚动到可视区域外的图标，保证任意时刻只露出一个图标。
   • 对齐所有图标的垂直边距，保证每一次位移的45px偏移量刚好匹配单图标的高度，不会出现位置错位。

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