纯 css 悬停动效应优先使用 transform 和 opacity 实现，避免 top/left/width/height 等触发重排的属性；背景滑入用 background-size + 自定义属性控制；动画需显式声明 animation-name；双元素联动推荐父容器 hover 或 :has()（兼容性需兜底）；动效设计需权衡性能与体验。
纯 CSS 悬停动效不需要 JavaScript，但要真正“酷炫”且不卡顿，关键不在堆效果，而在选对属性、控好触发时机、避开重排陷阱。
用 transform 和 opacity 做过渡最安全
浏览器对 transform（平移、缩放、旋转）和 opacity 的动画优化最好，GPU 加速直接生效，不会触发布局重排。一旦你用 top、left、width、height 或 background-color 做 hover 过渡，就可能掉帧，尤其在中低端设备上。
-
transform: translateY(-5px)✅ 安全；top: -5px❌ 触发重排 -
opacity: 0.8✅ 安全；visibility: hidden❌ 无过渡能力，且不可逆 - 别忘了加
will-change: transform（仅对高频悬停元素），但别滥用——它会提前占用图层资源
背景渐变滑入效果靠 background-size + 自定义属性
那种“悬停时色条从右向左滑过”的按钮效果，本质是控制渐变背景的尺寸和位置。用 background-size 配合 CSS 自定义属性比写死两个值更灵活，也避免重复声明。
- 基础写法：
background: linear-gradient(#1095c1, #1095c1) no-repeat; - 设初始尺寸：
background-size: 0% 100%;，再用transition: background-size 0.4s; - 悬停时改尺寸：
&:hover { background-size: 100% 100%; } - 进阶控制方向：加
background-position: right;+&:hover { background-position: left; }，并把background-position的过渡设为0s，否则移出时会反向滑一次
:hover 动画必须显式声明 animation-name
如果你用 animate.css 这类框架，别指望 animate__pulse:hover 能直接工作——它只是个 class 名，不是可复用的动画名。CSS 不会自动把类名映射到 @keyframes。
- 查文档确认对应 keyframes 名，比如
animate__pulse对应的动画名就是animate__pulse - 手动写规则：
&:hover { animation-name: animate__pulse; animation-duration: 0.6s; animation-fill-mode: both; } - 注意移动端 Safari 对
animation-play-state支持不稳定，别依赖它做暂停/恢复逻辑
双元素联动必须调整 DOM 结构
想让“悬停链接 A 时，独立的背景块 B 也动”，别硬套 .link:hover ~ .bg。兄弟选择器 ~ 只能选它后面同级的元素，如果 .bg 在 HTML 里写在前面，这条规则永远不匹配。
- 正确做法：把
.bg提成父容器，所有链接包在里面，然后写.container:hover .bg { ... } - 或者用
:has()（Chrome 105+、Safari 15.4+ 支持）：.bg:has(+ .link:hover)，但兼容性仍需兜底 - 绝对定位 +
z-index控制层级，确保背景块不会被其他内容遮挡
真正难的不是写出酷炫效果，而是判断哪个动效值得加、加在哪、加多快——用户扫一眼就过的按钮，0.6 秒脉冲动画反而拖慢感知；而产品卡片这种核心内容区，轻微上浮 + 阴影加深 + 按钮反色，三者同步但节奏错开一点点，才显得有呼吸感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
