border-color本身不可直接动画，必须用单边属性（如border-top-color）或配合transparent简写实现；推荐border-top-color+transparent+rotate方案，兼容性好、性能优。
border-color动画为什么不能直接写
因为
不是可动画的CSS属性——浏览器不支持对它做插值过渡。你写
，动画根本不会动，只会瞬间跳变。真正能动的是
这类**单边颜色属性**，或者用
简写配合
来“骗”出视觉变化。
用
+
实现单色旋转缺口
这是最稳、最轻量的极简Loading做法，核心就三步：
给元素设等宽高 +
（否则是方框）
四边都设
，再单独覆盖
用
驱动
，且必须加
示例关键CSS：
注意：别写
，只写
更简洁；也别用
，旧版Safari会掉帧。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
Safari闪烁、IE11兼容、响应式自适应这三处最容易翻车
三个看似小细节，实际上线后高频报障：
Safari闪烁
：iOS 15–16上纯
偶发白屏闪动。加
即可修复，Chrome/Firefox无副作用
IE11兼容
：它不认
，得写成
；也不支持
里的
关键字，得补
前缀并删掉
响应式脆弱
：固定
在按钮内或卡片里极易被挤压变形。改用
更健壮，现代浏览器全支持，老浏览器回退到固定尺寸也无妨
别碰
或
做缺口动画
有人想用
切半圆再旋转，或用
调色——这些方案在iOS 15.4之前有渲染撕裂，且无法和
同时触发硬件加速。一旦叠加阴影、透明度或父容器有
，动画就会卡顿甚至消失。坚持用
+
组合，是经过五年以上多端验证的最小可靠路径。
animation: border-color 1sborder-colorborder-color: red; animation: change 1s;border-top-colorbordertransparentborder-top-colortransparentborder-radius: 50%border: 4px solid transparentborder-top-color: #3498db@keyframestransform: rotate()animation-timing-function: linear.loader {
width: 40px;
height: 40px;
border: 4px solid transparent;
border-top-color: #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}from { transform: rotate(0deg); }torotateZ()transform: rotate()transform-style: preserve-3d; backface-visibility: hidden;transform-origin: centertransform-origin: 50% 50%animation: spin 1s linear infinitelinear-ms-animationlinearwidth/heightaspect-ratio: 1; min-width: 24px;clip-pathfilterclip-path: inset(0 0 0 50%)filter: hue-rotate()transformoverflow: hiddenborder-top-colortransparent