如何用Tailwind CSS实现容器hover时元素的平滑移动动画？

我有一个div，hover时会改变尺寸，内部包含两个仅在div较大时才能容纳的元素。其中一个元素在父div未被hover时通过position: absolute隐藏；当父div被hover时该元素显示，但第二个元素会被瞬间挤到div边缘。如何让第二个元素以ease等方式平滑移动？

以下是复现的简化版本：

HTML代码 #

<div id="main">
  <div id="one"></div>
  <div id="second"></div>
</div>

原CSS代码 #

@import "tailwindcss";

@theme {
}

@keyframes make-small {
  from {
    width: 450px;
  }

  to {
    width: 250px;
  }
}

@keyframes asd {
  from {
    position: static;
    opacity: 100;
  }

  to {
    position: absolute;
    opacity: 0;
  }
}

#main {
  width: 450px;
  height: 200px;
  border: solid 1px black;
  margin: 100px;
  display: flex;
  justify-content: space-around;
}

#one {
  width: 200px;
  height: 200px;
  border: solid 1px red;
}

#second {
  position: static;
  visibility: visible;
  width: 200px;
  height: 200px;
  border: solid 1px blue;
}

#main:hover {
  animation-duration: 1s;
  animation-name: make-small;
  animation-fill-mode: forwards;
}

#main:hover #second {
  animation-duration: 1s;
  animation-name: asd;
  animation-fill-mode: forwards;
}

需求：实现蓝色方块消失后，红色方块平滑移动到父div中间位置，使用Tailwind CSS完成。

核心问题是你用动画修改了不可过渡的position属性，且父容器尺寸变化与子元素状态切换的节奏不同步。用Tailwind内置的过渡类可以更简洁地实现平滑效果：

步骤1：调整HTML结构，添加Tailwind基础类 #

<div id="main" class="w-[450px] h-[200px] border border-black m-[100px] flex justify-around transition-all duration-1000 relative">
  <div id="one" class="w-[200px] h-[200px] border border-red transition-all duration-1000"></div>
  <div id="second" class="w-[200px] h-[200px] border border-blue opacity-100 transition-all duration-1000 absolute right-[-200px]"></div>
</div>

步骤2：用Tailwind hover类实现状态切换 #

@import "tailwindcss";

@theme {
}

#main:hover {
  @apply w-[250px];
}

#main:hover #one {
  @apply mx-auto;
}

#main:hover #second {
  @apply opacity-0 right-[-300px];
}

实现原理 #

• 父容器#main添加transition-all duration-1000，让宽度变化平滑过渡
• 蓝色方块#second默认用absolute定位到容器外，通过opacity和right属性的过渡实现平滑消失（这两个属性支持CSS过渡）
• 红色方块#one在hover时添加mx-auto，配合父容器的宽度变化，通过transition-all实现平滑居中移动
• 统一过渡时长为1000ms，保证所有动画节奏同步

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