怎么利用CSS3实现一个平滑的旋转加载动画？-css教程-PHP中文网

平滑旋转动画需显式设置 animation-duration、animation-timing-function（必须为 linear）、animation-fill-mode（必须为 both）及 transform: translateZ(0) 或 will-change: transform 以触发 GPU 加速并避免首帧突兀与移动端抖动。

怎么利用css3实现一个平滑的旋转加载动画？

直接用 @keyframes + transform: rotate() 就能动起来，但“平滑”不取决于能不能转，而在于是否触发 GPU 加速、首帧是否突兀、移动端是否抖动——这些全由几个关键 CSS 属性控制。

为什么 loading 旋转动画一上页面就卡或闪一下

浏览器在 DOM 尚未完全就绪时就开始解析 CSS 动画，如果 .loading 元素初始状态没压住，或动画立即播放，就会和 layout/reflow 冲突。尤其当页面有大量图片、字体或同步 JS 执行时，animation 可能被强制降帧甚至暂停。

常见现象包括：

opacity: 0 的元素在 animation-delay 期间突然闪现
动画开始后第一帧明显偏移（比如从 5deg 跳到 0deg）
iOS Safari 或旧版 Android WebView 上旋转抖动、掉帧

根本原因是：动画没脱离主线程布局流程，也未启用硬件加速。

必须显式设置的 animation 控制项

只写 animation: spin 0.8s infinite 看似简洁，但在生产环境极不可靠。以下参数不能省略或依赖默认值：

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

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

下载

animation-duration：必须明确数值（如 0.8s），部分旧版 Chrome 对未声明 duration 的行为是 0s
animation-timing-function：旋转类 loading 必须用 linear，否则转速不均；ease 会导致起步慢、中途快、收尾拖沓
animation-fill-mode：必须设为 both，确保延迟期保持 from 状态，且单次播放后也能停留末帧
transform: translateZ(0) 或 will-change: transform：强制创建独立合成层，触发 GPU 加速，避免重排重绘干扰

旋转 spinner 的 HTML/CSS 最简可靠写法

别用 border 模拟环形（缩放易变形、抗锯齿差），改用 border-radius: 50% + border + transform: rotate() 组合，兼容性更好、缩放稳定。

示例代码：

.loading-spinner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #e0e0e0;
  border-top-color: #4285f4;
  animation: spin 0.8s linear infinite;
  animation-fill-mode: both;
  transform: translateZ(0);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

注意点：