使用CSS transition和:hover实现列表项悬停过渡效果更高效，通过设置transition属性可使背景色、文字颜色或位移等变化平滑进行，如配合transform: translateX()增强交互感；若需复杂动画，则可用@keyframes定义关键帧并结合animation属性控制过程，推荐使用cubic-bezier缓动函数提升视觉体验。
实现列表项悬停过渡效果，可以通过 CSS 的 transition 和 :hover 伪类来完成。虽然你提到的是“animation”，但大多数情况下，简单的悬停过渡使用 transition 更高效、更直观。当然也可以结合 @keyframes 实现更复杂的动画效果。
1. 使用 transition 实现平滑过渡（推荐）
这是最常见也最实用的方式。给列表项设置属性变化的过渡效果，比如背景色、文字颜色或位移。
- 列表项 1
- 列表项 2
- 列表项 3
CSS 样式：
.list li {
padding: 10px;
color: #333;
background-color: #fff;
list-style: none;
cursor: pointer;
transition: all 0.3s ease;
}
.list li:hover {
background-color: #007bff;
color: white;
transform: translateX(5px);
}
说明：
立即学习“前端免费学习笔记（深入）”；
-
transition: all 0.3s ease;表示所有可动画属性在 0.3 秒内平滑变化 -
transform: translateX(5px);让元素向右轻微移动，增强交互感
2. 使用 @keyframes 制作复杂悬停动画
如果你想要更精细控制动画过程，可以使用 @keyframes 配合 animation 属性。
.list li {
padding: 10px;
color: #333;
list-style: none;
cursor: pointer;
}
.list li:hover {
animation: slideIn 0.4s forwards;
}
@keyframes slideIn {
from {
background-color: #fff;
color: #333;
transform: translateX(0);
}
to {
background-color: #007bff;
color: white;
transform: translateX(10px);
}
}
注意：
-
forwards确保动画结束后保持最终状态 - 这种方式适合需要精确控制中间帧的场景
3. 添加延迟与缓动效果提升体验
通过调整缓动函数和延迟时间，可以让过渡更自然。
.list li {
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
推荐使用的缓动函数：
-
ease-in-out：开始和结束都柔和 -
cubic-bezier(0.25, 0.8, 0.25, 1)：类似 Material Design 的流畅感
transition 就足够了，性能好又容易维护。只有在需要复杂路径或循环动画时才考虑 @keyframes。 
