不能。css transition仅响应属性值变化过程，无法实现周期性闪烁；骨架屏呼吸感闪烁需用@keyframes+animation实现，transition仅适用于骨架淡入或加载完成时内容平滑替换。
transition 能不能直接让骨架屏闪烁
不能。CSS transition 只响应属性值的**变化过程**，比如从 opacity: 0.2 到 opacity: 0.8；它本身不触发循环动画，也不控制“闪烁”这种周期性明暗切换。想实现骨架屏的呼吸感闪烁，得靠 @keyframes + animation，transition 在这里只适合做「骨架图淡入」或「加载完成时平滑替换」这类单次过渡。
用 animation 实现骨架闪烁的最小可行写法
核心是定义一个透明度抖动动画，并应用在骨架元素上。常见错误是直接给 background-color 动画——这会导致色块跳变，不够柔和；推荐用 opacity 或 filter: brightness() 配合 animation-timing-function 控制节奏：
`.skeleton {
animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.7; }
}`
-
cubic-bezier(0.4, 0, 0.6, 1)让闪烁更自然，避免机械式线性来回 - 动画时长建议在
1.2s–1.8s之间：太短显得焦躁，太长失去“正在加载”的提示感 - 别对整个容器设
animation，优先作用于具体骨架块（如.skeleton-avatar、.skeleton-line），否则可能误带动画子元素
和真实内容替换时 transition 怎么接上
骨架屏消失、真实内容出现的过程，才是 transition 的主战场。关键在于：骨架元素和真实内容要共用同一容器，且通过 class 切换控制显隐，而不是用 display: none 粗暴移除——那会中断所有过渡效果：
`.skeleton-wrapper > * { transition: opacity 0.3s ease-out; }
.skeleton-wrapper .skeleton { opacity: 1; }
.skeleton-wrapper .content { opacity: 0; }
.skeleton-wrapper.loaded .skeleton { opacity: 0; }
.skeleton-wrapper.loaded .content { opacity: 1; }`
- 必须给父子元素都加
transition，否则只写在.skeleton上，内容出现时没有淡入效果 - 用
opacity而非visibility，因为后者不可过渡；也别用height或transform模拟隐藏，容易引发重排 - JS 触发时机很重要：等数据真正 ready 后再加
loadedclass，不要在请求发出后就提前切换
移动端和低性能设备上的坑
闪烁动画在低端安卓机或 iOS Safari 上容易卡顿甚至跳帧，不是代码写错了，而是浏览器对 opacity 动画的优化策略不同。最稳妥的解法是用 will-change: opacity 提前声明，但仅限骨架元素本身：
- 别全局加
will-change: transform或will-change: all，这反而拖慢渲染 - 动画期间避免同时触发布局（如读取
offsetHeight）或频繁 JS 修改样式 - 可加一层媒体查询降级：
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; opacity: 0.5; } }尊重系统级动效偏好设置
真正难的不是写出闪烁，而是让闪烁不抢眼、不干扰阅读节奏，又能在加载结束时干净利落地让位——这个分寸感，往往比代码多敲几行还费琢磨。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
