:focus-visible必须与:hover配合使用，因:hover对键盘用户无效，仅靠它会导致焦点不可见，违反WCAG 2.4.7；需同时声明两者并提供替代焦点样式，兼顾鼠标与键盘用户。
transition 要配 :focus-visible，不能只靠 :hover
仅用 :hover 做悬停反馈，对键盘用户或屏幕阅读器使用者是无效的。浏览器在聚焦元素（比如按 Tab 键）时不会触发 :hover，所以按钮变色、位移等效果会完全消失，导致“看不见焦点”——这是 WCAG 2.4.7 焦点可见性失败的典型场景。
正确做法是把交互逻辑同时绑定到 :hover 和 :focus-visible 上：
.button {
transition: background-color 0.2s ease, transform 0.2s ease;
}
.button:hover,
.button:focus-visible {
background-color: #0056b3;
transform: translateY(-1px);
}
注意：:focus-visible 是现代浏览器默认行为（Chrome/Firefox/Edge 100+），它只在“用户明确通过键盘聚焦”时生效，避免鼠标点击后意外出现焦点框；若需兼容旧版 Safari，可降级为 :focus，但要配合 outline: none 的谨慎移除（必须提供替代焦点样式）。
别用 transition 改变 visibility 或 display
visibility: hidden 和 display: none 都不可过渡——浏览器无法计算中间状态，会导致 transition 直接失效，或退化为硬切。更糟的是，display: none 会让屏幕阅读器立刻忽略该元素，打断语义流。
实现“淡入淡出”类显隐动效，应组合使用：
-
opacity（支持过渡，取值 0→1） -
visibility（控制是否参与布局和可访问性，值为visible/hidden） - 必要时加
pointer-events: none防止过渡中误触
示例：
.tooltip {
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s;
}
.tooltip.show {
opacity: 1;
visibility: visible;
}
这里 visibility 的过渡其实只是“延迟同步”，真正平滑的是 opacity；visibility 变化本身无动画，但设了时长可防止它比 opacity 先生效导致闪现。
transition-duration 别超过 0.3s，且禁用 prefers-reduced-motion
过长的过渡（如 0.5s+）会拖慢操作节奏，对认知障碍用户尤其不友好；而动画本身可能诱发眩晕，WCAG 2.3.3 明确要求提供关闭选项。
最简方案：用媒体查询捕获系统偏好
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01s !important;
}
}
注意：!important 是必要的，否则组件级 transition 定义会覆盖它；0.01s 比 0s 更稳妥——某些浏览器对 0s 仍会触发重排，而极短时间能确保视觉上“无感”，又不破坏 DOM 状态流转。
transform + transition 是安全的，但慎用 scale 缩放文本
transform 不影响文档流、不触发重排，天生适合微交互；但用 scale() 放大含文字的容器时，会放大像素而非字体逻辑尺寸，导致字体发虚、对比度下降，违反 WCAG 1.4.4 文本清晰度要求。
适用场景与规避方式：
- 按钮图标、装饰性图形：放心用
transform: scale(1.1) - 含文字的按钮/卡片：改用
padding或margin微调尺寸（它们可 transition，且保持字体渲染质量） - 必须缩放文字区域：用
font-size过渡代替transform，并确保最小字号 ≥ 16px
例如：
.card {
transition: padding 0.2s ease, background-color 0.2s ease;
}
.card:hover {
padding: 16px;
background-color: #f8f9fa;
}
这种写法既保持可访问性，又避免 GPU 渲染带来的字体亚像素模糊问题。
过渡本身不难，难的是在平滑和可访问之间不妥协——每个 transition 属性背后，都得想清楚：谁在用？怎么触发？失效了怎么办？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
