CSS动画计时功能作用于中点

Question

我在google上找不到任何答案，所以我在这里尝试： animation-timing-function属性是否可以用于整个动画？因为现在它作用于中点，而不是整个动画。我的意思是，我有这个动画：

Codepen link

和animation-timing-function property设置为缓入。但是，不是让整个动画变得轻松，而是0％-50％的部分与50％-100％的部分分别缓解，因此，动画并不流畅。有办法吗？