CSS动画不工作。快速闪烁然后结束

Question

JS小提琴：https://jsfiddle.net/tv3k2dwL/

我的CSS：

#returned_data{
  border: 5px solid transparent;
  animation-name: border-animation;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  animation-delay: 1s;
  margin-top: 10px;
}

@keyframes border-animation {
  0%{
    border-image: linear-gradient(to right, red, yellow);
    border-image-slice: 1;
  }
  25%{
    border-image: linear-gradient(to right, yellow, green);
    border-image-slice: 1;
  }
  50%{
    border-image: linear-gradient(to right, green, blue);
    border-image-slice: 1;
  }
  75%{
    border-image: linear-gradient(to right, blue, blueviolet);
    border-image-slice: 1;
  }
  100%{
    border-image: linear-gradient(to right, blueviolet, steelblue);
    border-image-slice: 1;
  }
}

这是关于现在正在发生的事情的简短介绍：

https://i.gyazo.com/ea8920f97a6539e5779f75a0f7583339.gif (不能上传图片，因为我还不到10名代表)

我不太确定为什么会发生这种情况。任何帮助都是非常感谢的。

Answer 1

您当前使用的animation-timing-function导致了此问题，请尝试使用animation-timing-function: step-start;。此行为似乎与chrome处理ease-in-out的方式无关

#returned_data{
  border: 5px solid transparent;
  animation-name: border-animation;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: step-start;
  animation-fill-mode: both;
  animation-delay: 1s;
  margin-top: 10px;
}

在操作JSFiddle中查看它

另外，我看到您正在使用$.post，但没有发布任何数据，我建议您使用$.get

Answer 2

添加transition属性，并给出大约2秒。