Animated border unwanted delay

Question

I'm trying to create an infinite animation that sequentially changes colors of border sides (travelling around). I cant figure out the unwanted delays / jumps at the beginning of the each repetition.

#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>

You’re only starting to color _anything_ red, when the animation has reached its 25% stage already. If you want something to be red right from the beginning - well then you’d obviously have to start doing that at 0% already. — 04FS, Sep 20 '19 at 11:11
I tried with like you said but was getting some unwanted delays. The loop was not traveling but stopped at the end and then jumped again. — mr.work, Sep 20 '19 at 11:14
maybe you want something like this: https://stackoverflow.com/a/56577095/8620333 — Temani Afif, Sep 20 '19 at 14:16

score 16 · Accepted Answer · answered Sep 20 '19 at 11:29

16

#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>

answered Sep 20 '19 at 11:29

ankitkanojia

3,072
4
22
35

1

Great, is there a way to make this transition smooth? Like a travelling line? – mr.work Sep 20 '19 at 11:37
yes we can, give me some time will share you sample design link with the same functionality. – ankitkanojia Sep 20 '19 at 11:41
1

@mr.work please refer https://jsfiddle.net/3hwoxxpp for the same, you have to use this concept. It will help you to develop an idea for a smooth transition. – ankitkanojia Sep 20 '19 at 12:08

Animated border unwanted delay

1 Answers1