我@keyframes在 2016 年 1 月学习了 CSS3语法，两年多后，我发现自己@keyframes在很多工作中都使用了动画（比 CSS3 过渡更复杂，比基于 javascript 的动画更简单）。
我真正想念的一件事是能够以@keyframes秒而不是百分比来表达。是否有任何技巧可以实现这一目标？
我知道我可以使用以下100shack 来循环显示彩虹色，每 3 秒循环一次：
div {
width: 120px;
height: 120px;
background-color: violet;
animation: myAnimation 100s;
}
@keyframes myAnimation {
0% {background-color: red;}
3% {background-color: orange;}
6% {background-color: yellow;}
9% {background-color: green;}
12% {background-color: cyan;}
15% {background-color: blue;}
18% {background-color: violet;}
100% {background-color: violet;}
}<div></div>但这意味着动画在（有效）完成后仍在运行（尽管在不知不觉中）另外 82 秒。除其他问题外，这使多次迭代变得遥不可及。
我真正想写的很简单：
@keyframes myAnimation {
0s {background-color: red;}
3s {background-color: orange;}
6s {background-color: yellow;} …