CSS移动端实现加载中动画效果_利用keyframes定义旋转关键帧-css教程-PHP中文网

旋转动画失效主因是元素 display 非 block/inline-block 或宽高为0；ios卡顿因动画含非合成属性；应仅用 transform/opacity，设 will-change: transform，尺寸用 em/rem，深色模式需媒体查询适配。

css移动端实现加载中动画效果_利用keyframes定义旋转关键帧

用 `@keyframes` 写旋转动画，为什么转不起来？

常见现象是加了 @keyframes spin，也用了 animation: spin 1s linear infinite，但元素纹丝不动。核心原因只有两个：没给元素设 display: inline-block（或 block）这类可动画的显示类型；或者元素本身宽高为 0，转了个寂寞。

旋转动画依赖 transform，而 transform 对 display: inline 元素（如 <span></span> 默认）默认无效，必须显式设 display: inline-block 或 block
如果用伪元素 ::after 做 loader，记得设 content: ""，否则不渲染
移动端 Safari 对 transform-origin 的默认值更敏感，建议显式写成 transform-origin: center

CSS `animation` 在 iOS 上卡顿或跳帧

iOS WebKit 对非合成属性动画（比如 width、height、background-color）会强制走主线程重排，极易掉帧。旋转类 loader 必须只动 transform 和 opacity 这两个能触发硬件加速的属性。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

错例：animation: spin 1s ease-in-out infinite 配合 @keyframes spin { 0% { width: 20px; } 100% { width: 30px; } } —— 宽度变化引发 layout，iOS 下大概率卡
对例：只用 transform: rotate(0deg) → rotate(360deg)，再加 will-change: transform 提前提示合成
真机调试时，打开 Safari 开发者工具 → “Timelines” 面板，看 FPS 是否稳定在 55–60

适配不同尺寸屏幕的 loader 大小和速度

移动端屏幕密度差异大，用固定 px 值做 loader 尺寸，在 iPhone SE 和 iPad Pro 上观感天差地别。关键不是“响应式”，而是“相对视觉一致性”。

尺寸统一用 em 或 rem：比如 width: 1.2em; height: 1.2em;，继承父文字大小，自然缩放
旋转速度用 s 单位没问题，但避免低于 0.4s（人眼难识别）或高于 1.6s（显得卡顿）
深色模式下若 loader 是浅色边框，记得加 @media (prefers-color-scheme: dark) 调整 border-color

用纯 CSS 实现“点状呼吸”+“环形旋转”双效果

很多设计稿要求一个 loader 同时有旋转基底 + 内部三点呼吸脉动，不是套两层 div 就完事——嵌套过深会放大 iOS 动画性能问题。

推荐单容器 + 伪元素：主元素负责 border 旋转环，::before 和 ::after 做两个呼吸点，再用自身 box-shadow 投第三个点（省 DOM 节点）
呼吸动画用 opacity + scale 组合，关键帧里避免写 scale(0)（可能被 Safari 渲染为消失），改用 scale(0.2)
三个点的 animation-delay 错开 0.2s，比写 JS 控制更轻量、更可靠