必须写在悬停前的原始状态里，也就是 :hover 规则之外。浏览器只在属性值变化时触发过渡，如果 transition 只写在 :hover 中，那初始状态没有过渡定义，变化就直接跳变。
css元素缩放和旋转动画不平滑怎么办_使用transition-transform和timing-function优化
使用transform结合tr…
transition
精选推荐
css元素定位后动画位移异常怎么办_结合transform和position协调
元素用 position 定位…
CSS如何制作响应式的侧边抽屉菜单动画_利用transition监听right属性变化
很多开发者写 transiti…
最新动态
css元素悬停后过渡不生效怎么办_检查transition属性书写是否正确
CSS伪类:fullscreen应用_进入全屏模式后的样式定制
浏览器只在元素真正处于全屏状态（即通过 Element.requestFullscreen() 进入）时，才匹配 :fullscreen 伪类。直接写 CSS 却没调用 JS 全屏 API，样式必然不会触发。
CSS断点选择艺术_常用屏幕尺寸的标准断点设置指南
因为它们源自 iPad 第一代的物理分辨率（768×1024），不是视口宽度，更不是用户真实浏览场景。现代移动端浏览器默认缩放、桌面端高 DPR 屏幕、折叠屏、竖屏笔记本都会让这些数值失效。
CSS加载状态提示器_各种圆形、条形Loader的CSS实现
因为浏览器对transform和opacity的动画能走合成层（compositor thread），不触发重排重绘；而用left、top、width等属性驱动动画，每次变化都会强制同步计算样式+布局+绘制，尤其在低端设备或复杂页面里容易掉帧甚至肉眼可见闪烁。
CSS伪类:placeholder-shown应用_占位符显示时的交互逻辑
直接用 :placeholder-shown 伪类就行，但它只对 <input> 和 <textarea></textarea> 生效，且必须是原生 placeholder 属性触发的占位符（不是 JS 模拟的）。
如何在 JavaScript 图片轮播中实现平滑的淡入淡出过渡效果
本文详解如何通过 css `opacity` 动画配合 js 控制逻辑，在图片轮播中实现可靠的淡入淡出（fade in/out）效果，避免首次加载闪现、消除切换生硬感，并集成图片预加载提升体验。
CSS工具库Magic.css实战_独特的CSS3特效动画集成
根本原因是它依赖 transform 和 opacity 的初始值触发 CSS 动画，但很多场景下元素加载时已处于“终态”，浏览器跳过动画。比如用 display: none 切换显示、或 JS 动态插入后立刻加 class。
CSS响应式设计中的高度自适应_处理内容动态增减后的布局
因为 flex 项默认有 min-height: auto，会阻止子元素的 height: auto 按内容撑开——尤其当父容器设了 display: flex 且没显式控制主轴方向时，子元素高度容易被“锁死”。
CSS文本下划线滑动过渡_利用伪元素与width实现的特效
根本原因是 ::after 初始状态没设透明或隐藏，浏览器渲染时先画出默认宽度的下划线，再缩放/位移——人眼就看到“闪”。必须让伪元素初始不可见，且用 transform 配合 transition 控制变化路径。
CSS网格实现的垂直导航菜单_带图标与子菜单的网格化方案
根本原因是 grid 容器的 overflow 或 place-items 干扰了子菜单的定位上下文。子菜单（.submenu）通常用 position: absolute，但它会相对于最近的「定位上下文」祖先计算位置——而 display: grid 本身不创建新定位上下文，除非该网格容器设置了 position: relative。