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

时间:2019-09-13 10:51:37

标签: css css-transitions transform

在加载状态下,我正在运行@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/

有什么想法吗?

0 个答案:

没有答案
相关问题