CSS动画顺逆时针切换需通过rotate()数值正负控制：0deg→360deg为顺时针，0deg→-360deg为逆时针；animation-direction无法真正实现逆时针，必须用旋转值设计或CSS变量动态控制。
直接用 direction 翻转 keyframes 方向是行不通的，因为 CSS 的 @keyframes 本身不支持通过 direction（这是文本属性）来控制动画方向。真正能控制动画正向/反向播放的是 animation-direction 属性，而要实现“顺时针 ↔ 逆时针”切换圆环加载动画，核心在于旋转方向（transform: rotate()）的起止值设计。
✅ 正确思路：靠 rotate() 的数值增减方向决定顺/逆时针
CSS 中，rotate(0deg) → rotate(360deg) 是顺时针；rotate(0deg) → rotate(-360deg) 或 rotate(360deg) → rotate(0deg) 是逆时针（取决于浏览器插值逻辑）。关键不是翻转 keyframes，而是定义不同的旋转路径。
-
顺时针动画：从
0deg到360deg -
逆时针动画：从
0deg到-360deg（推荐，语义清晰、兼容好）
? 实现切换：用两个命名动画 + class 切换
定义两套 @keyframes，再通过 JS 或伪类切换应用的动画名：
@keyframes spin-cw {
to { transform: rotate(360deg); }
}
@keyframes spin-ccw {
to { transform: rotate(-360deg); }
}
<p>.loading-ring {
animation: spin-cw 1s linear infinite;
}</p><p>.loading-ring.reverse {
animation-name: spin-ccw;
}JS 切换只需：el.classList.toggle('reverse')。
立即学习“前端免费学习笔记（深入）”；
? 进阶技巧：单 keyframes + animation-direction 配合？
animation-direction: reverse 会让整个动画倒播，但对循环旋转来说，它只是把 0→360 倒过来变成 360→0 —— 视觉上仍是顺时针（因为 rotate 值在减小，但浏览器仍按最短路径插值，通常还是顺时针转回来）。所以不能依赖 animation-direction 实现真正的逆时针效果。必须靠 rotate 的正负号或起止值设计。
⚡ 小贴士：更简洁写法（CSS 自定义属性 + calc）
如果想复用同一套 keyframes，可用 CSS 变量控制旋转方向：
@keyframes spin {
to { transform: rotate(calc(var(--rev, 1) * 360deg)); }
}
<p>.loading-ring {
--rev: 1; /<em> 1 = 顺时针 </em>/
animation: spin 1s linear infinite;
}</p><p>.loading-ring.ccw {
--rev: -1; /<em> -1 = 逆时针 </em>/
}这样只需切 class，无需重复定义 keyframes。
基本上就这些。记住：方向由 rotate 数值变化趋势决定，不是 direction 属性的事 —— 别被名字误导。
