前端Wiki/词条/keyframes

keyframes

定义CSS 关键帧规则，用 @keyframes 定义动画各时间节点的样式状态

@keyframes 描述「动画进行到百分之几时，元素长什么样」。浏览器负责在关键帧之间补间，于是你能定义多状态的复杂动画，而不只是起止两点（那是 transition 的能力）。

百分比选择器 0% 可用 from、100% 可用 to。同一个关键帧规则可被多个元素复用，通过 animation 属性分别控制时长、延迟、循环次数。

省略 0%/100% 时，浏览器用元素当前样式兜底；
steps(n) 让动画逐帧跳变，适合精灵图与打字机效果；
多个动画逗号分隔 + 错开 delay，做出波浪/错落入场。

CSS

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.item {
  animation: fadeUp .5s ease both;
  animation-delay: calc(var(--i) * .08s);   /* 逐个入场 */
}

@keyframes blink { 50% { opacity: 0; } }
.cursor { animation: blink 1s steps(2) infinite; }

⚠ 常见误区

动画结束状态要靠 fill-mode: forwards 保持，否则回跳
steps() 适合逐帧动画，linear 才适合补间
@keyframes 名称全局共享，注意命名冲突

🔗 相关词条animation transition 缓动函数 transform