CSS cubic-bezier动画无法平滑还原至初始位置的问题求助

嘿，我太懂这种糟心的感觉了——hover的时候动画丝滑得不行，结果光标一挪开直接跳回原位，完全破坏了体验！这种问题90%的概率是你把transition属性只加在了:hover状态里，导致浏览器只在鼠标移入时知道要平滑过渡，移出时却没有过渡规则可以遵循，只能直接跳回初始样式。

核心解决方案：把Transition放在元素的初始状态 #

这是最关键的一步！一定要把transition定义在元素的默认样式中，而不是仅在:hover伪类里。这样不管是移入还是移出，浏览器都会按照你设定的规则来平滑过渡。

示例代码（结合你的HTML结构） #

首先补全你的HTML结构（假设.left里的图片是要做滑入动画）：

<article class="anim">
  <a href="#foo">
    <img src="https://dummyimage.com/240x200/ff9900/fff.png&text=TADA" alt="foo">
    <span class="left">
      <img src="https://dummyimage.com/240x200/121212/fff&text=LEFT" alt="left">
    </span>
  </a>
</article>

然后是修复后的CSS：

.anim a {
  position: relative;
  display: inline-block;
  overflow: hidden; /* 确保滑入的元素不会超出容器 */
}

.anim a .left {
  position: absolute;
  top: 0;
  left: 0;
}

/* 初始状态：定义默认样式 + 过渡规则 */
.anim a .left img {
  transform: translateX(-100%); /* 初始位置在容器左侧外 */
  opacity: 0; /* 初始透明 */
  /* 重点：这里添加transition，指定要过渡的属性和时长、缓动函数 */
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease;
}

/* Hover状态：只需要修改要变化的属性即可 */
.anim a:hover .left img {
  transform: translateX(0); /* 滑入到容器内 */
  opacity: 1; /* 显示出来 */
}

额外注意事项 #

• 确保所有变化的属性都包含在transition里：如果你同时修改了transform、opacity、top等多个属性，一定要把它们都列在transition属性中，没被包含的属性依然会突兀变化。
• 避免和@keyframes动画冲突：如果你同时使用了CSS关键帧动画，要确保hover状态的动画结束后能正确回退到初始状态，或者直接改用纯transition实现交互动画，这样更容易控制过渡逻辑。

这样调整后，你再测试一下——鼠标移入时平滑动画，移出时也会按照同样的节奏慢慢回到初始位置，再也不会有突兀的跳转啦！

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