如何用秒数而非百分比定义CSS3 @keyframes动画？

嘿，这个需求我太有共鸣了！每次用百分比写@keyframes都得掰着手指头算时间节点，要是能直接用秒数定义简直爽翻。刚好有几个实用技巧可以解决这个问题，给你唠唠：

1. 简单粗暴的100秒基准法（你提到的技巧扩展） #

这个方法的核心思路是把动画总时长设为100秒，这样动画进度的1%就刚好对应1秒，时间节点直接用秒数转成百分比就行，完全不用计算。比如你说的每3秒一次的彩虹循环，就可以这么写：

div {
  width: 100px;
  height: 100px;
  /* 总时长设为100秒，1% = 1秒 */
  animation: rainbow 100s infinite linear;
}

@keyframes rainbow {
  0% { background-color: red; }
  3% { background-color: orange; } /* 第3秒切换 */
  6% { background-color: yellow; } /* 第6秒切换 */
  9% { background-color: green; } /* 第9秒切换 */
  12% { background-color: blue; }
  15% { background-color: indigo; }
  18% { background-color: violet; }
  100% { background-color: red; } /* 回到初始色，完成循环 */
}

优点是零成本上手，写的时候完全不用动脑子；缺点是总时长固定在100秒，如果要做短时长动画，得按比例换算百分比（比如总时长30秒的话，1秒≈3.333%）。

2. 灵活可控的CSS变量计算法 #

如果需要自定义动画总时长，用CSS变量+calc()的组合可以完美解决。先定义总时长和秒转百分比的计算规则，后续直接用秒数写时间节点就行：

:root {
  --total-duration: 18s; /* 自定义动画总时长 */
  /* 计算1秒对应的百分比：100% ÷ 总时长 */
  --sec-to-percent: calc(100% / var(--total-duration));
}

div {
  width: 100px;
  height: 100px;
  animation: rainbow var(--total-duration) infinite linear;
}

@keyframes rainbow {
  0% { background-color: red; }
  calc(3 * var(--sec-to-percent)) { background-color: orange; }
  calc(6 * var(--sec-to-percent)) { background-color: yellow; }
  calc(9 * var(--sec-to-percent)) { background-color: green; }
  calc(12 * var(--sec-to-percent)) { background-color: blue; }
  calc(15 * var(--sec-to-percent)) { background-color: indigo; }
  calc(18 * var(--sec-to-percent)) { background-color: violet; }
  100% { background-color: red; }
}

想改总时长？只需要调整--total-duration的值就行，所有时间节点会自动适配，现代浏览器都支持这种写法。

3. 预处理器自动转换法（适合项目开发） #

如果你的项目用了Sass/Less这类预处理器，还可以写个小函数自动把秒数转成百分比，写代码时直接用秒数定义，编译后自动生成百分比：

// Sass函数：秒数转百分比
@function sec-to-percent($sec, $total-duration) {
  return ($sec / $total-duration) * 100%;
}

// 定义动画总时长
$total-duration: 18s;

div {
  width: 100px;
  height: 100px;
  animation: rainbow $total-duration infinite linear;
}

@keyframes rainbow {
  0% { background-color: red; }
  #{sec-to-percent(3, $total-duration)} { background-color: orange; }
  #{sec-to-percent(6, $total-duration)} { background-color: yellow; }
  #{sec-to-percent(9, $total-duration)} { background-color: green; }
  #{sec-to-percent(12, $total-duration)} { background-color: blue; }
  #{sec-to-percent(15, $total-duration)} { background-color: indigo; }
  #{sec-to-percent(18, $total-duration)} { background-color: violet; }
  100% { background-color: red; }
}

这个方法最适合团队项目，代码可读性拉满，后期维护也方便。

总结一下 #

• 快速写小动画：选100秒基准法，省事！
• 需要灵活调整时长：选CSS变量计算法，不用重复改百分比！
• 项目开发：选预处理器函数法，代码更优雅！

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