如何制作一个简单的加载动画Loading_通过CSS Animation关键帧-css教程-PHP中文网

最常用兼容性最好的loading动画是无限旋转圆圈，需用@keyframes定义360°匀速旋转，配合animation: spin 1s linear infinite，并设display:block/inline-block、vertical-align:middle及硬件加速等细节优化。

如何制作一个简单的加载动画loading_通过css animation关键帧

用 `@keyframes` 定义旋转类加载动画

最常用、兼容性最好的 Loading 动画是无限旋转的圆圈，核心是定义一个 360° 旋转的关键帧。注意：必须给元素设 display: inline-block 或 block，否则 transform 在某些浏览器（如旧版 Safari）中可能不生效。

实操建议：

动画名取语义化名称，比如 spin，避免用 loading 这类泛称（易冲突）
起始帧（0%）和结束帧（100%）的 transform: rotate() 值要严格匹配，否则动画会“跳变”
别漏写 to 关键字的等价写法 —— 100% { transform: rotate(360deg); } 比 to { ... } 兼容性更好

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

给元素应用 `animation` 并控制行为

光有关键帧不够，必须用 animation 属性挂载。这里最容易出错的是时长与缓动函数搭配不当，导致转得“卡”或“晕”。

实操建议：

时长建议设为 0.8s～1.2s：太短（如 0.3s）人眼难识别循环，太长（如 2s）显得卡顿
用 linear 缓动，避免 ease 或 ease-in-out —— 旋转动画需要匀速才自然
必须显式写 infinite，否则只播一次就停；running 是默认值，不用额外写

.loader {
  width: 24px;
  height: 24px;
  border: 2px solid #eee;
  border-top-color: #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

解决 IE11 及部分安卓 WebView 的兼容问题

IE11 不支持 transform: rotate() 在伪元素上动画，且老安卓 WebView 对 @keyframes 解析不稳定。绕过方式不是加前缀，而是换结构。

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

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

下载

实操建议：

放弃用 ::after 画圆，改用真实 <div class="loader"></div> 元素
对 IE11 加 fallback：用 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2)（仅限静态旋转，所以只作降级提示）
安卓 4.4 WebView 中，animation 若没触发，尝试加 transform: translateZ(0) 强制硬件加速