css - 动画边框不必要的延迟

Question

我正在尝试创建一个无限动画，依次改变边界边的颜色（四处走动）。我无法弄清楚每次重复开始时不需要的延迟/跳跃。

#neki {
  
    padding:10px;
    border: 6px solid #dcdcdc;
    animation: example 1s infinite;
  
}

@keyframes example {
  
  0% {
    border-color: #dcdcdc;
  }
  25% {
    border-left-color: red;
  }
  50% {
    border-top-color: red;
  }
  75% {
    border-right-color: red;
  }
  100% {
    border-bottom-color: red;
  }
  
}

<br>
<span id="neki">awdawdawdwdawda</span>

标签： css

Answer 1

#neki {
  padding: 10px;
  border: 6px solid #dcdcdc;
  animation: example 1s infinite;
}

@keyframes example {
  0%,
  100% {
    border-top-color: red;
    border-right-color: #dcdcdc;
  }
  25% {
    border-right-color: red;
    border-bottom-color: #dcdcdc;
  }
  50% {
    border-bottom-color: red;
    border-left-color: #dcdcdc;
  }
  75% {
    border-left-color: red;
    border-top-color: #dcdcdc;
  }
}

<br />
<span id="neki">awdawdawdwdawda</span>