关键帧Keyframe
你可能会说
让 logo 一直转，AI 说要用 keyframes？
在动画时间线上标出样式状态点；浏览器对可插值的属性计算中间值CSS 的 @keyframes 可以在 0%、50%、100% 等时间点指定样式。浏览器会对可插值的属性计算时间点之间的值；动画是否循环要另设 animation-iteration-count（例如 infinite），关键帧本身不会自动循环。
也常被叫作关键帧Keyframe@keyframes
关键帧指定了哪些状态点
循环播放中
animation.css
@keyframes spin {
0% { rotate: 0deg }
50% { rotate: 180deg }
100% { rotate: 360deg }
}
.spin { animation: spin 2s; animation-iteration-count: infinite }0% · 0 度中间值50% · 180 度中间值100% · 360 度
你指定关键帧；浏览器只会为可插值属性计算中间值，其他属性可能直接切换。
关键帧和过渡的区别
过渡只有两态：从初始状态到目标状态，由悬停、点击等切换触发，播放一次就停。
关键帧可以多态并循环：在 @keyframes 写 0%、50%、100% 等状态点；要循环，还需另设 animation-iteration-count。
读代码找状态点：百分比是作者指定的时间点；浏览器只会对可动画插值的属性计算中间值，不支持插值的属性可能离散切换。
你可以这样告诉 AI Agent
请让加载图标循环旋转：用 @keyframes 指定旋转状态，再单独设置 animation-iteration-count: infinite。改完确认它循环播放，并响应系统“减少动效”设置。
接下来学什么
延伸阅读 · 权威出处
快速练习