Create a moving border animation over a square element

Question

I am trying to make the moving border of a CSS animation work on a square, but I cannot figure out how to make it work. It works great on a circle since I just use rotation using keyframes. This is my current markup.

.box {
  width: 50px;
  height: 50px;
  margin: 50px auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  position: relative;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}
.box .border {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 50px;
  height: 50px;
  background: transparent;
  border: 4px solid transparent;
  border-top-color: orangered;
  border-radius: 50%;
  animation-name: border;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}
@-webkit-keyframes border {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }

<div class="box">
  <div class="border"></div>
</div>

Run codeHide result

Answer 1

rotate , , . , , , , .

, SVG stroke-dashoffset, . stroke-dasharray / (1 ^st param) / (2 ^nd param). stroke-dashoffset , .

polygon {
  stroke: red;
  stroke-width: 3;
  stroke-dasharray: 50, 750;
  stroke-dashoffset: 0;
  fill: none;
  animation: border 5s linear infinite;
}
@keyframes border {
  to {
    stroke-dashoffset: -800;
  }
}

<svg width="210" height="210">
  <polygon points="5,5 205,5 205,205 5,205" />
</svg>

Hide result

---

CSS, , . , . . background-position, - , , .

, background-position , . , , background-position .

div {
  height: 200px;
  width: 200px;
  box-sizing: border-box;
  background-image: linear-gradient(to right, red 50px, transparent 50px), linear-gradient(to bottom, red 50px, transparent 50px), linear-gradient(to right, red 50px, transparent 50px), linear-gradient(to bottom, red 50px, transparent 50px);
  background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%; /* one of the values is the border thickness, other is 100% */
  background-repeat: no-repeat;
  background-position: -50px 0px, right -50px, 200px bottom, 0px 200px; /* positions such that none of the images are visible at start */
  animation: border 5s linear; /* add infinite if you need infinite animation */
}
@keyframes border {
  /* animate position such that they come into view and go out of it one by one */
  25% {
    background-position: 200px 0px, right -50px, 200px bottom, 0px 200px;
  }
  50% {
    background-position: 200px 0px, right 200px, 200px bottom, 0px 200px;
  }
  75% {
    background-position: 200px 0px, right 200px, -50px bottom, 0px 200px;
  }
  100% {
    background-position: 200px 0px, right 200px, -50px bottom, 0px -50px;
  }
}

<div class='border-animation'></div>

Hide result

, CSS SVG, , .

div {
  height: 200px;
  width: 200px;
  box-sizing: border-box;
  background-image: linear-gradient(to right, red 50px, transparent 50px), linear-gradient(to bottom, red 50px, transparent 50px), linear-gradient(to right, red 50px, transparent 50px), linear-gradient(to bottom, red 50px, transparent 50px);
  background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
  background-repeat: no-repeat;
  background-position: -50px 0px, right -50px, 200px bottom, 0px 200px;
  animation: border 5s linear;
}
@keyframes border {
  20% {
    background-position: 150px 0px, right -50px, 200px bottom, 0px 200px;
  }
  25% {
    background-position: 200px 0px, right 0px, 200px bottom, 0px 200px;
  }
  45% {
    background-position: 200px 0px, right 150px, 200px bottom, 0px 200px;
  }
  50% {
    background-position: 200px 0px, right 200px, 150px bottom, 0px 200px;
  }
  70% {
    background-position: 200px 0px, right 200px, 0px bottom, 0px 200px;
  }
  75% {
    background-position: 200px 0px, right 200px, -50px bottom, 0px 150px;
  }
  95% {
    background-position: 200px 0px, right 200px, -50px bottom, 0px 0px;
  }
  100% {
    background-position: 200px 0px, right 200px, -50px bottom, 0px -50px;
  }
}

<div class='border-animation'></div>

Hide result

, CSS:

div {
  height: 200px;
  width: 200px;
  box-sizing: border-box;
  background-image: linear-gradient(to right, red 50px, transparent 50px), linear-gradient(to bottom, red 50px, transparent 50px), linear-gradient(to right, red 50px, transparent 50px), linear-gradient(to bottom, red 50px, transparent 50px);
  background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
  background-repeat: no-repeat;
  background-position: 0px 0px, right -50px, 200px bottom, 0px 200px;
  animation: border 5s linear infinite;
}
@keyframes border {
  20% {
    background-position: 150px 0px, right -50px, 200px bottom, 0px 200px;
  }
  25% {
    background-position: 200px 0px, right 0px, 200px bottom, 0px 200px;
  }
  45% {
    background-position: 200px 0px, right 150px, 200px bottom, 0px 200px;
  }
  50% {
    background-position: 200px 0px, right 200px, 150px bottom, 0px 200px;
  }
  70% {
    background-position: 200px 0px, right 200px, 0px bottom, 0px 200px;
  }
  75% {
    background-position: 200px 0px, right 200px, -50px bottom, 0px 150px;
  }
  95% {
    background-position: 200px 0px, right 200px, -50px bottom, 0px 0px;
  }
  95.1% {
    background-position: -50px 0px, right 200px, -50px bottom, 0px 0px;
  }
  100% {
    background-position: 0px 0px, right 200px, -50px bottom, 0px -50px;
  }
}

<div class='border-animation'></div>

Hide result

Answer 2

css3, , animated-border.min.css. .

<a href="ui-box top-leftStart">
  <span class='ui-border-element'>
    Animated Hyperlink
  </span>
</a>

css: https://cdn.jsdelivr.net/gh/code-fx/Pure-CSS3-Animated-Border@V1.0/css/animated-border/animated-border.min.css

-: https://code-fx.imtqy.com/Pure-CSS3-Animated-Border/

.