CSS眨眼动画@keyframes中0%、100%与5%、95%设置的作用是什么？

核心逻辑拆解 #

你提到的@keyframes blink时间节点设置，是为了模拟真实人眼的眨眼特征：眨眼动作快、睁眼状态久，总时长5秒的动画各阶段对应效果如下：

• 0%/100%节点：设置transform: scale(1, .05)，对应眼皮完全闭合的状态
• 5%/95%节点：设置transform: scale(1, 1)，对应眼皮完全睁开的状态（你贴的代码里此处写为5%, 100%属于笔误，会导致状态冲突，正确应写为5%, 95%）

各时间段对应的动作 #

• 0% → 5%：仅占总时长的5%（0.25秒），完成从闭眼到睁眼的过渡，速度极快，符合真实眨眼的抬眼节奏
• 5% → 95%：占总时长的90%（4.5秒），全程保持睁眼状态，对应人正常视物时的睁眼状态
• 95% → 100%：仅占总时长的5%（0.25秒），完成从睁眼到闭眼的过渡，速度极快，符合真实眨眼的闭眼节奏

调整数值的影响 #

• 把5%调大（比如改为10%）：睁眼过渡时间变长，眨眼动作会变慢、更柔和
• 把95%调小（比如改为90%）：闭眼过渡时间变长，眨眼动作同样会变慢
• 两个数值向中间靠拢（比如改为20%和80%）：睁眼总时长缩短，眨眼频率会明显变高

附修正后可正常运行的完整代码：

* {
  box-sizing: border-box;
}

.face {
  display: flex;
  justify-content: space-between;
  width: 150px;
  height: 200px;
  padding: 30px;
  background: tomato;
  transition: .3s ease-in-out;
}

.face:hover {
  background: green;
}

.eye {
  background: white;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  transform-origin: 50%;
  animation: blink 5s infinite;
}

@keyframes blink {
  0%, 100% {
    transform: scale(1, .05);
  }
  5%,
  95% {
    transform: scale(1, 1);
  }
}

内容的提问来源于stack exchange，提问作者ObaidNadeem