如何用特定linear()时序函数替代关键帧实现相同CSS动画效果？

原CSS关键帧动画实现了如下效果：初始完全不透明，到50%动画时长时变为完全透明，70%时长时回到完全不透明，之后保持该状态直到动画结束。对应的代码是：

@keyframes fade-out-50-in-70 {
  0% { opacity: 1; }
  50% { opacity: 0; }
  70% { opacity: 1; }
  100% { opacity: 1; }
}
.animate-fade-out-in {
  animation-name: fade-out-50-in-70;
  animation-timing-function: linear;
}

尝试用linear(0, 0.5 35%, 1 70%)时序函数简化关键帧，写出了下面的代码但未达到预期效果：

@keyframes fade-out-in {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
.animate-fade-out-in-2 {
  animation-name: fade-out-in;
  animation-timing-function: linear(0, 0.5 35%, 1 70%);
}

问题原因与解决方案 #

核心问题是对linear()时序函数的参数逻辑和关键帧的映射关系理解有误。原动画的时间轴占比需要精准对应到时序函数的参数中：

• 0% → 50%：opacity从1降至0（占总时长50%）
• 50% → 70%：opacity从0升至1（占总时长20%）
• 70% → 100%：opacity保持1不变（占总时长30%）

修复方案1（基于原简化关键帧）

调整linear()的参数，让过渡节奏完全匹配原动画的时间占比：

@keyframes fade-out-in {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
.animate-fade-out-in-2 {
  animation-name: fade-out-in;
  animation-timing-function: linear(0, 0 50%, 1 70%, 1);
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

修复方案2（更简洁的关键帧）

可以把关键帧进一步简化为仅保留起始和结束状态，完全用linear()控制整个动画节奏：

@keyframes fade-out-in-simple {
  0%, 100% { opacity: 1; }
}
.animate-fade-out-in-3 {
  animation-name: fade-out-in-simple;
  animation-timing-function: linear(1, 0 50%, 1 70%, 1);
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

完整示例代码 #

CSS

div {
  background: red;
  width: 100px;
  aspect-ratio: 1/1;
  margin: 10px;
  display: inline-block;
}

/* 原动画 */
@keyframes fade-out-50-in-70 {
  0% { opacity: 1; }
  50% { opacity: 0; }
  70% { opacity: 1; }
  100% { opacity: 1; }
}
.animate-fade-out-in {
  animation-name: fade-out-50-in-70;
  animation-timing-function: linear;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

/* 修复后方案1 */
@keyframes fade-out-in {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
.animate-fade-out-in-2 {
  animation-name: fade-out-in;
  animation-timing-function: linear(0, 0 50%, 1 70%, 1);
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

/* 简洁方案2 */
@keyframes fade-out-in-simple {
  0%, 100% { opacity: 1; }
}
.animate-fade-out-in-3 {
  animation-name: fade-out-in-simple;
  animation-timing-function: linear(1, 0 50%, 1 70%, 1);
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

HTML

<div class="animate-fade-out-in">原动画</div>
<div class="animate-fade-out-in-2">修复后方案1</div>
<div class="animate-fade-out-in-3">简洁方案2</div>

内容的提问来源于stack exchange，提问作者ss-t.c