CSS：无限循环动画不会在第一个和最后一个关键帧之间插值

Question

我很确定我注意到这一点，我似乎找不到一个适当的解决方案。我有一个CSS动画，意味着无限循环，它已经工作，但有一个问题。

// CSS
@keyframes myanim {
0% { transform: translate(0, 0) rotate(0deg) skewX(0deg); }
25% { transform: translate(5px, 5px) rotate(1deg) skewX(1deg); }
50% { transform: translate(0, 0) rotate(0eg) skewX(0deg); }
75% { transform: translate(-5px, -5px) rotate(-1deg) skewX(-1deg); }
100% { transform: translate(0, 0) rotate(0deg) skewX(0deg); }
}
// JS
element.style.animation = "myanim " + mytimer + "s infinite";

关键帧插值似乎不工作周围的接缝。在0%和100%之间没有插值:当动画刚刚开始或接近每次迭代结束时，它会减慢/设置到位/加速，而不是像其他关键帧之间保持恒定的节奏。是否有可能告诉浏览器以循环方式解释所有关键帧以使循环按预期工作?

Answer 1

@ MirceaKitsune是对的，你需要使用线性动画属性。我尝试了动画，它可以工作，这是小提琴:

.animated-heading {
animation: linear myanim 2s infinite;
}
@keyframes myanim {
0% {
transform: translate(0, 0) rotate(0deg) skewX(0deg);
}
12.5% {
transform: translate(2.5px, 2.5px) rotate(0.5deg) skewX(0.5deg);
}
25% {
transform: translate(5px, 5px) rotate(1deg) skewX(1deg);
}
37.5% {
transform: translate(2.5px, 2.5px) rotate(0.5deg) skewX(0.5deg);
}
50% {
transform: translate(0, 0) rotate(0eg) skewX(0deg);
}
62.5% {
transform: translate(-2.5px, -2.5px) rotate(-0.5deg) skewX(-0.5deg);
}
75% {
transform: translate(-5px, -5px) rotate(-1deg) skewX(-1deg);
}
87.5% {
transform: translate(-2.5px, -2.5px) rotate(-0.5deg) skewX(-0.5deg);
}
100% {
transform: translate(0, 0) rotate(0deg) skewX(0deg);
}
}

<h1 class="animated-heading">animated-heading</h1>