关键帧Keyframe
你可能会说
让 logo 一直转，AI 说要用 keyframes？
动画里由你亲自指定的几个状态点，系统自动补齐中间的过程让加载图标持续旋转或让按钮呼吸闪烁时，关键帧允许你在 0%、50%、100% 等时间节点明确设定形态，浏览器会自动计算补齐中间的过渡。与只支持起始和结束两态切换的过渡（transition）不同，关键帧可以定义多个阶段的状态，适合制作循环播放或分步变化的动画。
也常被叫作关键帧Keyframe@keyframes
让 logo 一直转，AI 说要用 keyframes？
@keyframes spin {
0% { rotate: 0deg }
50% { rotate: 180deg }
100% { rotate: 360deg }
}
.spin { animation: spin 2s infinite }加粗的百分比是你亲自指定的状态点；没有写到的位置由系统自动补齐。
过渡只有两态：从初始状态到目标状态，由悬停、点击等切换触发，播放一次就停。
关键帧可以多态并循环：指定 0%、50%、100% 等多个状态点，可设置无限循环或指定次数。
读代码找状态点：看到 @keyframes 里的百分比，就是作者指定的状态点；没有百分比的位置由系统补齐。
请让加载图标无限循环旋转：用 @keyframes 指定 0% 到 100% 的旋转状态，设置无限循环。改完后打开页面确认图标持续转动，并在系统开启“减少动效”时停下。