从@keyframe切换到transionion动画不起作用

Question

在加载状态下，我正在运行@keyframes动画。

@keyframes graph-line-loading {
  0% {
    transform: translateY(0%);
  }

  100% {
    transform: translateY(100%);
  }
}

当我停止动画graph__line 跳到translateY()值（直接设置）时。

然而background-color的动画效果很好。

我希望过渡属性也适用于transform。

.graph__line {
  transition-property: transform, background-color;
}

如果background-color动画中包含@keyframes，则其在状态更改时也不会转换。

即使@keyframes是通过不同的类添加的，似乎@keyframes中设置了动画的任何属性也会被过渡属性忽略。

请检查小提琴。

https://jsfiddle.net/LukaG/m4bzk6e3/

有什么想法吗？