推荐使用 transition 实现背景色和文字颜色的平滑过渡，正确写法为在默认状态设置 transition: background-color 0.3s ease, color 0.3s ease；hover 时修改颜色值即可自然过渡，避免使用非标准属性或 animation 导致动画异常。
在使用 :hover 状态时，如果希望背景色和文字颜色同时平滑过渡，推荐使用 transition 而不是 animation 来控制 background-color 和 color 的变化。直接使用 animation-background-color 或 animation-color 并不是标准 CSS 属性，这可能是导致动画异常的原因。
正确实现颜色渐变动画的方法
要让背景色和文字颜色在 hover 时自然过渡，应使用 transition 对 background-color 和 color 分别设置过渡效果。
.button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
color: #fffdd0;
}
这样，当鼠标悬停时，背景和文字颜色会同时以设定的缓动函数和持续时间进行过渡，视觉效果流畅自然。
避免使用非标准属性
CSS 中没有 animation-background-color 或 animation-color 这样的属性。如果你尝试用 @keyframes 动画来控制颜色变化，虽然技术上可行，但通常不如 transition 简洁高效。
立即学习“前端免费学习笔记（深入）”；
错误写法示例（不推荐）：
.button:hover {
animation: colorChange 0.3s forwards;
}
@keyframes colorChange {
to {
background-color: #0056b3;
color: #fffdd0;
}
}
这种做法可能导致动画只触发一次、无法反向恢复，或与其他交互冲突，造成“异常”感。
确保 transition 应用于正常状态
关键点是：把 transition 写在默认状态（非 hover）上，这样才能在进入和离开 hover 时都有动画效果。
- 不要只在
:hover里写transition - 确保两个颜色属性都设置了相同的过渡时间或分别定义
- 可统一写为
transition: all 0.3s ease，但更推荐明确列出属性以避免意外动画
处理特殊情况：渐变背景动画
如果背景是渐变色（如 linear-gradient），直接过渡不生效。此时可用 background-position 模拟颜色过渡，或使用 JS 配合 CSS 变量控制。
.gradient-button {
background: linear-gradient(90deg, #007bff, #0056b3);
background-size: 200% 100%;
transition: background-position 0.3s ease;
}
.gradient-button:hover {
background-position: 100% 0;
}
基本上就这些。用对方法，颜色动画就很顺。重点是别乱用 animation 去替代 transition，尤其对于简单的状态切换。
