.border-dance-container {
  box-sizing: border-box;
}

:root {
  --bd-gap-and-dash-length: 10px;
  --bd-border-width: 2px;
  --bd-border-color: hotpink;
  --bd-dash-percent: 70%;
  --bd-speed: 200px;
}

.border-dance:hover {
	animation: border-dance 10s infinite linear;
}

.border-dance {
  height: 100%;
  background: linear-gradient(90deg, var(--bd-border-color) var(--bd-dash-percent), transparent calc(100% - var(--bd-dash-percent))),
  linear-gradient(90deg, var(--bd-border-color) var(--bd-dash-percent), transparent calc(100% - var(--bd-dash-percent))),
  linear-gradient(0deg, var(--bd-border-color) var(--bd-dash-percent), transparent calc(100% - var(--bd-dash-percent))),
  linear-gradient(0deg, var(--bd-border-color) var(--bd-dash-percent), transparent calc(100% - var(--bd-dash-percent)));
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: var(--bd-gap-and-dash-length) var(--bd-border-width), var(--bd-gap-and-dash-length) var(--bd-border-width), var(--bd-border-width) var(--bd-gap-and-dash-length), var(--bd-border-width) var(--bd-gap-and-dash-length);
  background-position: 0 0, var(--bd-speed) 100%, 0 var(--bd-speed), 100% 0;
  animation: none;
}

@keyframes border-dance {
  0% {}
  100% {
    background-position: var(--bd-speed) 0, 0 100%, 0 0, 100% var(--bd-speed);
  }
}