如何实现反向Chevron Up图标动画？现有方案动画结尾异常

你当前代码的核心问题在于动画方向未完全反转：仅通过scale3d(-0.5, -0.5, -0.5)翻转了图标，但动画位移方向仍为向下，且初始/结束状态的变换逻辑冲突，导致动画结尾异常。以下是具体修正步骤及完整代码：

1. 修正Chevron图标方向 #

放弃三轴反转的scale3d写法，直接通过scaleY(-1)翻转图标实现向上箭头，逻辑更清晰，避免不必要的轴变换干扰。

2. 完全反转动画位移方向 #

原动画是向下移动（translateY(正值)），需改为向上移动（translateY(负值)），同时让初始和结束状态的transform保持一致，确保动画循环流畅无突兀跳转。

3. 调整文本位置与内容 #

适配向上动画的逻辑，调整文本位置并修改内容为"scroll up"。

修改后的完整代码 #

body {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #333;
}

.container {
  position: relative;
  width: 24px;
  height: 24px;
}

.chevron {
  position: absolute;
  width: 28px;
  height: 8px;
  opacity: 0;
  /* 翻转图标为向上，同时初始缩放0.5、处于下方远处 */
  transform: translateY(55px) scaleY(-1) scale(0.5);
  animation: move 3s ease-out infinite;
}

.chevron:first-child {
  animation: move 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
}

.chevron:before,
.chevron:after {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: #fff;
}

.chevron:before {
  left: 0;
  transform: skew(0deg, -30deg);
}

.chevron:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, 30deg);
}

@keyframes move {
  25% {
    opacity: 1;
  }
  33% {
    opacity: 1;
    /* 向上移动到30px位置，恢复原尺寸 */
    transform: translateY(-30px) scaleY(-1) scale(1);
  }
  67% {
    opacity: 1;
    /* 继续向上移动到40px位置 */
    transform: translateY(-40px) scaleY(-1) scale(1);
  }
  100% {
    opacity: 0;
    /* 回到初始状态，完成循环 */
    transform: translateY(-55px) scaleY(-1) scale(0.5);
  }
}

.text {
  display: block;
  /* 调整文本到图标上方 */
  margin-top: -75px;
  margin-left: -30px;
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .25;
  animation: pulse 2s linear alternate infinite;
}

@keyframes pulse {
  to {
    opacity: 1;
  }
}

关键修正点说明 #

• 图标翻转：用scaleY(-1)替代scale3d(-0.5, -0.5, -0.5)，仅翻转Y轴，避免多余变换
• 动画位移：将所有translateY正值改为负值，实现向上移动效果
• 循环流畅性：初始与结束状态的transform完全匹配，保证无限循环无卡顿
• 文本适配：调整margin-top让文本显示在图标上方，符合"向上滚动"的交互逻辑

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