如何实现关键帧平移动画无缝衔接？Logo虚线边框动画求助

我正在给只有两个字母的Logo做边框动画，因为没法直接实现Logo边框动画，就建了四个分别带上、下、左、右边框的div，逐个执行动画。但现在动画没法无缝衔接，会跳回初始位置，而且外层div容器装不下溢出的动画效果。我是CSS动画新手，想知道有没有办法做出Logo的动态移动虚线边框。

尝试的代码片段 #

/* div border for top */
.logo-border-up {
  background-color: transparent;
  border-top: 10px dashed #252422;
  width: 5rem;
  height: 10px;

  position: absolute;

  animation: animate-up 1s linear infinite;
}

@keyframes animate-up {
  0% {
    transform: translatex(0%);
  }

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

问题已解决 #

我已经搞定这个问题了，感谢一篇关于「CSS3动画中的虚线边框动画」的文章提供的思路。

内容的提问来源于stack exchange，提问作者user11270788