CSS Animation使用steps(2)插值异常，光标闪烁效果不符预期

问题原因 #

你遇到的是对steps()函数的行为理解偏差，并非浏览器异常。

1. steps(2)的误区：
   steps(n)默认采用jump-end模式，会把动画时长拆成n个等长阶段，每个阶段保持当前关键帧值，阶段结束时跳转至下一个值。你想要的是瞬间切换显示/隐藏，但steps(2)会把0→1的opacity变化拆成两步，反而导致你误以为出现了中间灰色状态（实际是0和1的切换，视觉错觉或对steps效果误判）。
2. 关键帧的默认补全：
   你定义的cursorblink只写了0%的状态，CSS会自动补全100%为元素初始的opacity:1，所以它和cursorblink2的动画逻辑一致，但同样因steps(2)的误用达不到预期。

正确实现方式 #

以下几种方案可以实现清晰的黑底白色光标闪烁：

方案1：steps(1)配合关键帧（精准切换） #

body{
  background: black;
  color:white;
}

.cursor::after{
  content: "";
  width: 0.5rem;
  height: 0.2rem;
  background: white;
  display: inline-block;
}

.c1::after{
 animation: cursorblink 1s steps(1) infinite;
}
 
@keyframes cursorblink{
  0% {opacity: 0;}
  50% {opacity: 1;}
}

steps(1)让动画仅保留两个离散状态：0-0.5s隐藏，0.5-1s显示，循环后瞬间切换，无过渡效果。

方案2：用visibility替代opacity（避免半透明错觉） #

如果担心opacity的半透明渲染问题，用visibility可以完全隐藏/显示元素：

body{
  background: black;
  color:white;
}

.cursor::after{
  content: "";
  width: 0.5rem;
  height: 0.2rem;
  background: white;
  display: inline-block;
  visibility: visible;
}

.c1::after{
 animation: cursorblink 1s steps(1) infinite;
}
 
@keyframes cursorblink{
  0% {visibility: hidden;}
  50% {visibility: visible;}
}

这个方案彻底消除半透明状态，只会呈现白色光标或完全隐藏，完全符合光标闪烁的需求。

方案3：简洁的线性交替动画 #

如果接受平滑过渡的闪烁效果（类似呼吸光标），可以用alternate方向：

body{
  background: black;
  color:white;
}

.cursor::after{
  content: "";
  width: 0.5rem;
  height: 0.2rem;
  background: white;
  display: inline-block;
}

.c1::after{
 animation: cursorblink 0.5s linear alternate infinite;
}
 
@keyframes cursorblink{
  from {opacity: 0;}
  to {opacity: 1;}
}

alternate会让动画在奇数次循环时从隐藏到显示，偶数次从显示到隐藏，配合线性动画实现平滑闪烁。

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