使用CSS transition和:hover实现列表项悬停过渡效果更高效，通过设置transition属性可使背景色、文字颜色或位移等变化平滑进行，如配合transform: translateX()增强交互感；若需复杂动画，则可用@keyframes定义关键帧并结合animation属性控制过程，推荐使用cubic-bezier缓动函数提升视觉体验。
实现列表项悬停过渡效果，可以通过 CSS 的 transition 和 :hover 伪类来完成。虽然你提到的是“animation”，但大多数情况下，简单的悬停过渡使用 transition 更高效、更直观。当然也可以结合 @keyframes 实现更复杂的动画效果。
这是最常见也最实用的方式。给列表项设置属性变化的过渡效果，比如背景色、文字颜色或位移。
<ul class="list"> <li>列表项 1</li> <li>列表项 2</li> <li>列表项 3</li> </ul>
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); 让元素向右轻微移动，增强交互感如果你想要更精细控制动画过程，可以使用 @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 确保动画结束后保持最终状态通过调整缓动函数和延迟时间，可以让过渡更自然。
.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。以上就是如何用css animation制作列表项悬停过渡的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
305
收藏
