css 页面加载动画怎么实现_利用 css animation 制作加载效果

用@keyframes定义旋转关键帧并配合animation实现无js加载动画，需注意border-radius设为50%、单设border-top-color形成缺口效果、animation加infinite属性；避免触发布局的属性动画，优先使用transform和opacity，合理设置动画时长（0.4s–1.2s）并启用GPU加速。

直接用 @keyframes 配合 animation 就能做出轻量、无 JS 的加载动画，关键在控制循环、时长和视觉节奏。

怎么写一个基础旋转加载动画

最常用的是无限旋转的圆圈或 logo。核心是定义旋转关键帧，再绑定到元素上：

@keyframes spin {   from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }  .loading-spinner {   width: 24px;   height: 24px;   border: 2px solid #eee;   border-top-color: #007bff;   border-radius: 50%;   animation: spin 1s linear infinite; }

注意三点：border-radius: 50% 确保是圆；border-top-color 单独设色形成“缺口旋转”效果；animation 必须带 infinite 才持续动。

为什么 loading 动画卡顿或跳帧

常见原因不是代码写错，而是渲染层没交由 GPU 加速或触发了重排：

立即学习“前端免费学习笔记（深入）”；

• transform 和 opacity 是安全属性，优先用它们做动画；避免对 width、height、left 等触发布局（layout）的属性做动画
• 加 will-change: transform 或 transform: translateZ(0) 可强制提升为合成层，但别滥用，尤其在大量元素上
• 动画时长别设太短（如 0.1s），低端设备可能跟不上帧率，建议 0.4s–1.2s 区间

如何让动画随数据加载状态切换显隐

纯 css 控制显示/隐藏，不依赖 JS 操作 class，可以用 :not() 或兄弟选择器配合隐藏逻辑，但更稳妥的是用 JS 切换 class：

.loading-spinner {   opacity: 0;   transition: opacity 0.2s ease; }  .loading-spinner.active {   opacity: 1; }

JS 中只需：spinner.classlist.toggle('active', isLoading)。不要用 display: none，它会中断动画状态；用 opacity + visibility 或 pointer-events: none 更平滑。

几个实用变体：缩放脉冲 & 骨架屏过渡

除了旋转，两种高频场景：

• 脉冲效果：适合按钮加载，用 scale + opacity：@keyframes pulse { 0% { transform: scale(0.95); opacity: 0.6; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.95); opacity: 0.6; } }
• 骨架屏占位：不用动画，用 linear-gradient 模拟内容区块，并加 animation: loading-shimmer 1.5s infinite 做光效扫过，比旋转图标更贴近真实内容结构

真正难的不是写出来，而是让动画在低配安卓机、旧版 safari 或高缩放 windows 屏上保持流畅——多测 animation-timing-function 和硬件加速触发点，比堆 fancy 效果重要得多。