如何用Tailwind实现指定动画序列？附元素代码与需求

Tailwind完全可以实现这个动画序列需求，核心是利用自定义过渡属性或关键帧动画来控制不同样式的生效时机，以下是两种可行方案：

方案一：过渡+延迟（贴合类生效逻辑） #

1. 添加自定义工具类 #

在你的Tailwind样式文件（如tailwind.css）中，通过@layer utilities定义两个分别控制圆角和边框的过渡规则：

@layer utilities {
  .transition-rounded {
    transition: border-radius 0.3s ease 0s;
  }
  .transition-border {
    transition: border-width 0.3s ease 0.3s;
  }
}

这里给圆角过渡设置0延迟，边框过渡设置0.3秒延迟，刚好衔接圆角动画结束后开始边框增长。

2. 编写HTML结构 #

给图片设置初始状态（无圆角、无边框），并应用自定义过渡类：

<div dir="rtl" class="aspect-ratio-1 group relative h-min w-full max-w-[300px] flex-shrink-0 lg:max-w-[390px]">
  <img 
    id="animated-img"
    class="border-indigo-400 rounded-none border-0 transition-rounded transition-border" 
    alt="Placeholder" 
    src="https://placehold.co/400x600"
  />
</div>

3. 触发动画 #

通过JS在页面加载（或其他触发时机，如点击）时添加目标类：

window.addEventListener('load', () => {
  document.getElementById('animated-img').classList.add('rounded-s-full', 'border-[12px]');
});

方案二：关键帧动画（无需JS触发） #

1. 定义关键帧动画 #

同样在Tailwind样式文件中添加自定义动画：

@layer utilities {
  @keyframes sequence-animate {
    0% {
      border-radius: 0;
      border-width: 0;
    }
    50% {
      /* 对应rtl下rounded-s-full的圆角效果 */
      border-radius: 0 9999px 9999px 0;
      border-width: 0;
    }
    100% {
      border-radius: 0 9999px 9999px 0;
      border-width: 12px;
    }
  }
  .animate-sequence {
    animation: sequence-animate 0.6s ease forwards;
  }
}

总动画时长设为0.6秒，前半段完成圆角变化，后半段完成边框增长。

2. 应用动画类 #

直接给图片添加动画类即可自动触发：

<div dir="rtl" class="aspect-ratio-1 group relative h-min w-full max-w-[300px] flex-shrink-0 lg:max-w-[390px]">
  <img 
    class="border-indigo-400 rounded-none border-0 animate-sequence" 
    alt="Placeholder" 
    src="https://placehold.co/400x600"
  />
</div>

补充说明 #

Tailwind默认的delay-*类是对所有过渡属性生效的，所以如果需要不同样式属性使用不同延迟，必须通过自定义过渡规则来拆分控制；如果是统一延迟的场景，直接用delay-300这类内置类即可。

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