如何在Tailwind CSS过渡动画完成后延迟rounded-full样式生效

要让rounded-full在缩放动画结束后生效，核心是拆分不同CSS属性的过渡配置，给圆角变化设置等于缩放时长的延迟：

修改后的代码 #

<div class="flex items-center justify-center h-screen">
  <button class="transition-[transform,background-color] duration-1000 ease-in-out bg-blue-600 hover:bg-red-600 hover:rounded-full hover:transition-[border-radius] hover:duration-300 hover:delay-1000 transform hover:-translate-y-1 hover:scale-110">
    Hover me
  </button>
</div>

关键逻辑说明 #

• 基础状态下，指定transition-[transform,background-color] duration-1000，让缩放（transform）和背景色变化在hover时立即触发，持续1000ms
• hover状态下，给rounded-full单独配置过渡：transition-[border-radius] duration-300 delay-1000，让圆角变化在1000ms后（即缩放动画结束时）开始，持续300ms完成
• 这样就实现了先完成缩放+背景色变化，再触发圆角过渡的效果

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