CSS悬停动画反向实现求助：复刻Gala官网动画遇阻

核心问题分析 #

1. 无反向动画：仅为:hover状态设置了字符过渡延迟，默认状态未配置反向延迟，导致鼠标移出时所有字符同时复位，无动画层级感。
2. 流畅度不足：使用transition: all会触发不必要的属性计算，增加性能开销；部分3D变换参数未对齐，导致动画衔接生硬。

优化步骤 #

• 为非hover状态的字符添加反向过渡延迟，实现移出时的反向依次动画
• 将过渡属性从all改为精准的transform，减少浏览器重绘开销
• 调整text__flip的初始位置与变换参数，让前后文本完全对齐
• 统一过渡曲线，确保动画的连贯性

修改后的代码 #

CSS

.link {
  position: relative;
  display: inline-block;
  font-size: 50px;
  line-height: 50px;
  letter-spacing: -.6px;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #000;
  text-decoration: none;
  backface-visibility: hidden;
  perspective: 100px;
  transform-style: preserve-3d;
}

.link:visited {
  text-decoration: none;
}

/* 统一过渡配置：仅针对transform，避免不必要的重绘 */
.transition {
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.text__normal {
  position: relative;
  transform-style: preserve-3d;
}

.text__normal span {
  display: inline-block;
  transform: rotateY(0deg) translateZ(25px);
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  backface-visibility: hidden;
}

/* 非hover状态的反向延迟：从最后一个字符到第一个依次递减 */
.text__normal .char1 { transition-delay: 145ms; }
.text__normal .char2 { transition-delay: 130ms; }
.text__normal .char3 { transition-delay: 115ms; }
.text__normal .char4 { transition-delay: 75ms; }
.text__normal .char5 { transition-delay: 60ms; }
.text__normal .char6 { transition-delay: 45ms; }
.text__normal .char7 { transition-delay: 30ms; }
.text__normal .char8 { transition-delay: 15ms; }

.link:hover .text__normal > span {
  transform: rotateX(90deg) translateZ(25px) translateX(20px);
}

/* hover状态的正向延迟：从第一个到最后一个依次递增 */
.link:hover .text__normal .char1 { transition-delay: 15ms; }
.link:hover .text__normal .char2 { transition-delay: 30ms; }
.link:hover .text__normal .char3 { transition-delay: 45ms; }
.link:hover .text__normal .char4 { transition-delay: 60ms; }
.link:hover .text__normal .char5 { transition-delay: 75ms; }
.link:hover .text__normal .char6 { transition-delay: 115ms; }
.link:hover .text__normal .char7 { transition-delay: 130ms; }
.link:hover .text__normal .char8 { transition-delay: 145ms; }

/* Flipside */
.text__flip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.text__flip span {
  display: inline-block;
  transform: rotateX(-90deg) translateZ(25px);
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  backface-visibility: hidden;
}

/* 非hover状态的反向延迟 */
.text__flip .char1 { transition-delay: 145ms; }
.text__flip .char2 { transition-delay: 130ms; }
.text__flip .char3 { transition-delay: 115ms; }
.text__flip .char4 { transition-delay: 75ms; }
.text__flip .char5 { transition-delay: 60ms; }
.text__flip .char6 { transition-delay: 45ms; }
.text__flip .char7 { transition-delay: 30ms; }
.text__flip .char8 { transition-delay: 15ms; }

.link:hover .text__flip > span {
  transform: rotateX(0deg) translateZ(25px) translateX(20px);
}

/* hover状态的正向延迟 */
.link:hover .text__flip .char1 { transition-delay: 15ms; }
.link:hover .text__flip .char2 { transition-delay: 30ms; }
.link:hover .text__flip .char3 { transition-delay: 45ms; }
.link:hover .text__flip .char4 { transition-delay: 60ms; }
.link:hover .text__flip .char5 { transition-delay: 75ms; }
.link:hover .text__flip .char6 { transition-delay: 115ms; }
.link:hover .text__flip .char7 { transition-delay: 130ms; }
.link:hover .text__flip .char8 { transition-delay: 145ms; }

HTML

<div class="container">
  <a href="#" class="link">
    <span class="transition">
      <span class="text__normal transition">
        <span class="char1">A</span>
        <span class="char2">n</span>
        <span class="char3">i</span>
        <span class="char4">m</span>
        <span class="char5">a</span>
        <span class="char6">t</span>
        <span class="char7">e</span>
        <span class="char8">d</span>
      </span>
      <span class="text__flip transition">
        <span class="char1">A</span>
        <span class="char2">n</span>
        <span class="char3">i</span>
        <span class="char4">m</span>
        <span class="char5">a</span>
        <span class="char6">t</span>
        <span class="char7">e</span>
        <span class="char8">d</span>
      </span>
    </span>
  </a>
</div>

额外说明 #

• 移除了冗余的visibility: visible（默认状态即为可见）
• 统一了perspective的写法，去掉了浏览器前缀（现代浏览器已支持标准写法）
• 调整了text__flip的top值为0，让翻转前后的文本完全对齐，避免错位
• 精准控制过渡属性为transform，减少浏览器的计算量，提升动画流畅度

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