为什么Tailwind配置的hover动画结束后目标属性值会被重置

这个现象是CSS动画的默认规则导致的：CSS animation 属性的默认 animation-fill-mode 取值为 none，意味着动画执行完成后，元素会立刻回到动画开始前的初始样式。你的卡片默认背景色为白色，因此500ms动画执行结束后，即使鼠标仍保持悬浮状态，背景色也会重置为初始的白色。

方案1：修改动画配置，保持动画最终状态 #

在tailwind.config.js的动画定义中添加forwards关键字，指定动画执行结束后保持最后一帧的样式：

animation: {
  "card-bg-animation": 'card-bg-animation-kf 500ms linear forwards',
},

注意：该方案仅能保证悬浮时动画结束后保持黑色，鼠标移出时会直接跳回白色，没有反向过渡效果，更适合单次执行不需要回退的动画场景。

方案2：改用Tailwind过渡属性（更推荐） #

这类两种状态切换的交互场景，使用transition过渡属性比关键帧动画更适配，不需要额外配置关键帧：
首先移除tailwind.config.js中自定义的card-bg-animation动画和对应关键帧配置，然后修改组件的className即可：

function FeatureCard({icon, title, text}: {icon:any, title:string, text:string}) {
    console.log(icon);
    return (
        <article className={'border flex flex-col items-center py-4 px-2 text-center w-3/12 h-60 overflow-hidden group bg-white transition-colors duration-500 hover:bg-black'}>
        </article>
    );
}

该方案会自动在悬浮/移出两个状态之间做平滑过渡，悬浮时保持黑色背景，移出时平滑过渡回白色，完全符合需求。

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