使用 :hover 与 transition 结合可实现平滑悬停动画。通过设置默认样式、定义 :hover 状态及过渡属性，如 transform、颜色或位移，配合 ease 缓动效果，提升交互体验。优先使用 transform 和 opacity 以优化性能，避免频繁重排，合理配置过渡时间与贝塞尔曲线，实现流畅自然的 CSS 动画效果。
使用 :hover 伪类与 transition 属性结合，可以轻松实现平滑的鼠标悬停动画效果。这种方式无需 JavaScript，仅通过 CSS 即可增强用户交互体验。
基本原理
:hover 用于定义元素在鼠标悬停时的样式状态，而 transition 控制样式变化过程中的过渡效果，比如持续时间、缓动方式等。当两者结合时，元素在进入和离开 hover 状态时会自动产生动画。
关键点：
- 设置元素默认样式
- 在 :hover 中定义目标样式
- 使用 transition 指定哪些属性需要动画以及动画参数
常见用法示例
以下是一些实用且常见的动画效果实现方式：
立即学习“前端免费学习笔记（深入）”；
/* 缩放效果 */
.card {
width: 200px;
height: 200px;
background: #007bff;
transition: transform 0.3s ease;
}
.card:hover {
transform: scale(1.1);
}
/ 颜色渐变 /
.button {
background-color: #fff;
border: 2px solid #007bff;
color: #007bff;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.button:hover {
background-color: #007bff;
color: #fff;
}
/ 位移动画 /
.box {
width: 100px;
height: 100px;
background: red;
transition: left 0.5s;
position: relative;
}
.box:hover {
left: 50px;
}
优化动画体验
为了让动画更自然流畅，注意以下几点：
- 优先使用 transform 和 opacity 做动画，性能更好
- 避免对 width、height、margin 等触发重排的属性频繁过渡
- 合理设置 transition-timing-function，如
ease-in-out或自定义贝塞尔曲线 - 可为不同属性设置不同的过渡时间，例如：
transition: background 0.3s, transform 0.6s
基本上就这些，掌握好 :hover 与 transition 的配合，就能做出简洁又有效的交互动画。
