使用 :hover 与 transition 可实现平滑的CSS动画效果，如按钮悬停变色、卡片缩放等，无需JavaScript且性能良好。通过设置 transition 控制颜色、大小、位置等属性的变化过程，结合 transform 和 opacity 等GPU加速属性可提升流畅度，支持多属性过渡与不同缓动函数，增强交互层次感。需注意在默认状态定义 transition，避免使用影响性能的 layout 属性及不支持过渡的 display 和 visibility，同时考虑移动端 hover 兼容性问题。
当鼠标悬停在元素上时，使用 :hover 伪类可以触发视觉变化，而结合 transition 属性，能让这些变化变得平滑流畅，实现简单的CSS动画效果。这种方式无需JavaScript，性能好，易于实现。
基本原理：:hover 与 transition 配合工作
:hover 用于定义鼠标指针移入元素时的样式状态，transition 则控制样式变化的过程（如持续时间、缓动函数等）。两者结合，可以让颜色、大小、位置等属性的变化呈现动画效果。
例如，让一个按钮在悬停时背景色缓慢变红：
.button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: red;
}
常用可动画的属性
transition 支持大多数数值型CSS属性，以下是一些常配合 :hover 使用的属性：
立即学习“前端免费学习笔记（深入）”；
- transform：实现位移、缩放、旋转等，性能优秀
- opacity：实现淡入淡出效果
- color / background-color：文字或背景颜色渐变
- width / height：改变尺寸（注意：避免 layout 重排）
- box-shadow：阴影动态增强
推荐优先使用 transform 和 opacity，因为它们由GPU加速，动画更流畅。
进阶技巧：多属性过渡与延迟
你可以同时过渡多个属性，并设置各自的持续时间或延迟。
.card {
opacity: 1;
transform: scale(1);
transition:
opacity 0.3s ease,
transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.card:hover {
opacity: 0.8;
transform: scale(1.05);
}
在这个例子中，透明度和缩放分别使用不同的缓动函数，使交互更有层次感。
注意事项
- 确保在默认状态下就设置好 transition，否则不会有动画过程
- 慎用对性能影响大的属性（如 left、top），建议改用 transform: translate()
- 避免过渡 display 或 visibility，它们不支持过渡动画
- 移动端需考虑 hover 的兼容性，部分设备可能不触发或延迟响应
