如何实现鼠标悬停时div旋转分为慢转后快转两阶段效果

不需要写JavaScript，纯CSS靠分阶段关键帧动画就能实现这个交互，核心是把原本一次性的180度旋转拆成两个速度差明显的阶段：

• 第一阶段占动画总时长的大头，缓慢转到10度，给用户悬停的即时反馈
• 第二阶段只占总时长的小部分，快速转完剩下的170度到180度，只有鼠标持续悬停不挪开才会触发这一段

直接替换你原来的CSS即可：

/* 定义两阶段翻转动画 */
@keyframes stagedFlip {
  0% {
    transform: rotateY(0deg);
  }
  /* 前75%的动画时长，缓慢转到10度 */
  75% {
    transform: rotateY(10deg);
  }
  /* 剩25%时长，快速转到180度 */
  100% {
    transform: rotateY(180deg);
  }
}

.flip-card-inner {
  /* 保留原3D变换属性，加回退过渡：鼠标移出时平滑转回初始状态 */
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  /* 悬停触发分阶段动画，总时长0.8s，匀速播放，结束后保持翻转状态 */
  animation: stagedFlip 0.8s linear forwards;
  /* 动画播放时关闭过渡，避免效果冲突 */
  transition: none;
}

参数调整说明 #

你可以根据自己想要的节奏改几个数值：

• 关键帧的75%节点：数值越大，第一阶段慢转的耗时越长，10度位置的停顿感越强，比如改成85%就会有更明显的“顿一下再快速翻过去”的效果
• 动画总时长0.8s：控制整体翻转节奏，比如改成1s的话，慢转阶段占0.75s，快转阶段占0.25s
• 75%节点处的rotateY(10deg)：如果觉得预备翻转的幅度太小，可以改成15deg，反馈会更明显

效果逻辑说明 #

• 鼠标刚移上去时，只会触发第一阶段慢转，在0.6s内慢慢转到10度
• 如果鼠标在慢转阶段就挪走，卡片会平滑转回初始状态，不会出现硬跳
• 鼠标一直悬停不挪的话，慢转结束后会自动进入快转阶段，用0.2s快速完成剩下的170度翻转

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