提交按钮按下后，那个小圆圈转了两圈就卡在原地不动。样式里写的是 transition: transform .8s linear，再点一次它才又转一圈，看着像卡死。

transition 只走一次，常驻旋转得用 animation

transition 靠属性值变化触发，从 0 转到 360 度就停在终点，没有下一帧。要一直转，得用 keyframes 定义终点，再挂 animation: spin 1s linear infinite。0% 和 100% 都写清楚，只写一个 to 的写法在某些 WebKit 版本里会被当成无变化而跳过。

  • @keyframes spin { to { transform: rotate(360deg); } }
  • .loader { animation: spin .9s linear infinite; }

transform-origin 没设对，图标会绕远处转

默认的旋转中心是元素自身中心，一般不用动。但用伪元素画的小箭头、宽高为 0 的定位点，转起来像被甩出去，问题就出在这。给元素一个确定的宽高，或者显式写 transform-origin: center center，现象立刻消失。

掉帧多半是走了重排

用 animation 改 width、top、margin-left 的，每帧都要重新算布局，低配机器上一眼能看出顿。rotate、scale、translate 走的是合成层，代价小得多。will-change: transform 只在动画期间加，结束就撤掉，一直挂着会多吃显存，长列表里尤其明显。

来回摆动不用写两套关键帧

animation-direction: alternate 配一组 0 到 100% 的关键帧，就能正着转完再倒回来。角度单位除了 deg 还有 turn，0.25turn 就是 90 度，跟设计稿对齐更直观。要转半圈停住，用 animation-fill-mode: forwards 保住末帧，别靠脚本再补一次样式。

结论：常驻旋转只用 animation，别拿 transition 硬凑；卡顿先查是不是动了布局属性。