Tailwind CSS中能否用@apply定义关键帧？动画实现方案咨询

需要实现以下进入和离开动画，相关参数已通过Tailwind CSS类给出：

Entering: "transform ease-out duration-300 transition"
  From: "translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
  To: "translate-y-0 opacity-100 sm:translate-x-0"
Leaving: "transition ease-in duration-100"
  From: "opacity-100"
  To: "opacity-0"

尝试了以下代码但无法生效：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .alt-pop {
    animation: alt-pop-enter, alt-pop-leave;
  }
  @keyframes alt-pop-enter {
    @apply transform ease-out duration-300 transition;
    from { @apply translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2; }
    to   { @apply translate-y-0 opacity-100 sm:translate-x-0; }
  }
  @keyframes alt-pop-leave {
    @apply transition ease-in duration-100;
    from { @apply opacity-100; }
    to   { @apply opacity-0; }
  }
}

怀疑原因：

1. keyframes无法与@apply配合使用
2. keyframes仅支持from和to，无法在内部添加额外CSS样式

咨询问题：

1. 如何尽量使用CSS而非JS来配置该进入和离开动画？
2. 如何最大化利用Tailwind CSS类来实现？
3. 如何设置从进入动画切换到离开动画的延迟？

想到的方案：将Tailwind类转换为原生CSS后自定义关键帧和动画类，是否有更优方案？

1. 纯CSS实现进入/离开动画 #

你怀疑的两点完全正确：@apply不能在@keyframes内部使用，且keyframes仅能定义关键帧的样式，动画的时长、缓动曲线等属性需要放在应用动画的元素上。

最优方案是借助Tailwind的自定义动画功能，通过CSS类切换触发进入/离开状态，动画逻辑完全由CSS控制（仅切换类的动作可能需要JS，但动画本身无需JS干预）。

2. 最大化复用Tailwind类的实现方式 #

直接用Tailwind提供的@keyframes定义动画，同时复用Tailwind内置的设计值（如时长、缓动曲线），避免手写冗余原生CSS：

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 定义进入动画关键帧（默认断点） */
@keyframes alt-pop-enter {
  from {
    transform: translateY(0.5rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 针对sm断点重写进入动画关键帧 */
@media (min-width: 640px) {
  @keyframes alt-pop-enter {
    from {
      transform: translateX(0.5rem);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
}

/* 定义离开动画关键帧 */
@keyframes alt-pop-leave {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* 将动画注册为Tailwind工具类 */
@layer utilities {
  .animate-alt-pop-enter {
    animation: alt-pop-enter 300ms ease-out forwards;
  }
  .animate-alt-pop-leave {
    animation: alt-pop-leave 100ms ease-in forwards;
  }
}

使用时直接给元素添加对应类即可：

• 进入状态：添加animate-alt-pop-enter
• 离开状态：切换为animate-alt-pop-leave（可通过CSS伪类如:hover、:active触发，或JS切换类）

如果需要组件化封装，也可以写组件类：

@layer components {
  .alt-pop {
    /* 元素基础样式 */
  }
  .alt-pop.enter {
    @apply animate-alt-pop-enter;
  }
  .alt-pop.leave {
    @apply animate-alt-pop-leave;
  }
}

3. 设置进入到离开的切换延迟 #

两种方式实现：

• 直接在离开动画类中添加animation-delay：

  .animate-alt-pop-leave {
    animation: alt-pop-leave 100ms ease-in forwards;
    animation-delay: 500ms; /* 自定义延迟时长 */
  }
  

• 复用Tailwind内置的delay-*工具类（默认包含常见延迟值，也可自行配置）：

  <div class="animate-alt-pop-leave delay-500"></div>
  

关于你提出的方案 #

将Tailwind类转原生CSS是可行的，但上面的方案更优——既复用了Tailwind的设计系统值，又将动画注册为Tailwind工具类，保持了Tailwind的使用习惯，减少原生CSS的手写量。

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