如何制作简单的加载动画特效_利用CSS3 animation与keyframes-css教程-PHP中文网

ie11中@keyframes spin不生效，因其仅识别带-ms-前缀的@-ms-keyframes及对应-ms-animation，且动画名不可含中划线；须同时定义两套关键帧并补全前缀，另ie11不支持animation-fill-mode，需手动设置初始样式。

如何制作简单的加载动画特效_利用css3 animation与keyframes

为什么直接写 `@keyframes spin` 在 IE11 里不转？

因为 IE11 不识别无前缀的 @keyframes，也不认 animation: spin 1s infinite 这种写法。它只吃带 -ms- 前缀的版本，而且名字不能含中划线（比如 load-spin 会静默失败，得改成 loadspin）。

必须同时写两套：

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

然后在元素上也补前缀：

.loader {
  animation: -ms-spin 1s linear infinite;
  animation: spin 1s linear infinite;
}

注意：IE11 对 transform 的硬件加速基本无效，纯靠 CPU 渲染。一个小圆点持续旋转超过 10 秒，就可能卡顿——这不是代码错，是浏览器限制。

`animation-fill-mode: backwards` 在 IE11 里为什么没用？

因为 IE11 完全不支持 animation-fill-mode，设了等于白写。如果你希望动画开始前就呈现第一帧样式（比如 loading 图标初始就显示），不能依赖这个属性，得手动加初始样式：

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

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

下载

给元素显式设置和 0% 关键帧一致的 CSS，比如 transform: rotate(0deg)
避免用 from { opacity: 0; } 然后指望 backwards 让它一开始透明——IE11 下它会直接从可见态开始闪
如果需要“入场前隐藏”，改用 visibility: hidden + JS 控制显隐更可靠

用伪元素做旋转加载器，`::before` 和 `::after` 动画不同步怎么办？

常见原因是两个伪元素共用了同一个 @keyframes 名，但没配不同的 animation-delay 或 animation-duration，结果看起来像卡住或重叠。

解决方法很简单：

让它们用同一套关键帧，但错开起始时间：animation-delay: 0s 和 animation-delay: -0.5s
或者干脆定义两个动画名：@keyframes spin1 和 @keyframes spin2，一个顺时针一个逆时针
别忘了给伪元素加 content: '' 和 display: block（或 inline-block），否则动画不触发

示例节选：

.spinner::before {
  animation: spin 1s linear infinite;
}
.spinner::after {
  animation: spin 1s linear infinite;
  animation-delay: -0.5s; /* 错开半拍 */
}