使用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);}
说明：
立即学习“前端免费学习笔记（深入）”；
Waymark
Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。
79 查看详情 
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。
以上就是如何用css animation制作列表项悬停过渡的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1051225.html
微信扫一扫 
支付宝扫一扫 
