html - 动画边框以相互跟随 css

Question

我想在要循环的 HTML 元素周围制作一个边框。您可以在这个 pen 中找到它我设法让它正确运行一次。但是，如果我将 infinite 属性添加到 animation 中，它会在第一个循环之后显示所有内容。在这种情况下，这不是我想要的。在只有一条线可见的情况下，如何使线无限地相互跟随？

html {
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  font-family: sans-serif;
  color: #fff;
  background-color: #000;
}

.wrapper {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 25%);
}

.heading-one {
  margin: 0;
  padding: 0;
  border: 1px solid #fff;
  padding: 30px;
  font-size: 28px;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.inner-border {
  opacity: 0;
}

.inner-border:nth-child(1) {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  width: 80px;
  height: 6px;
  background-color: #fff;
  animation: animate1 1s ease-in alternate;
}

@keyframes animate1 {
  0% {
    left: 0;
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 1;
  }
}

.inner-border:nth-child(2) {
  content: '';
  position: absolute;
  top: 0;
  right: -3px;
  height: 80px;
  width: 6px;
  background-color: #fff;
  animation: animate2 1s ease-in 1s alternate;
}

@keyframes animate2 {
  0% {
    top: 0;
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 1;
  }
}

.inner-border:nth-child(3) {
  content: '';
  position: absolute;
  bottom: -3px;
  right: 0;
  height: 6px;
  width: 80px;
  background-color: #fff;
  animation: animate3 1s ease-in 2s alternate;
}

@keyframes animate3 {
  0% {
    right: 0;
    opacity: 1;
  }
  100% {
    right: 100%;
    opacity: 1;
  }
}

.inner-border:nth-child(4) {
  content: '';
  position: absolute;
  bottom: 0;
  left: -3px;
  width: 6px;
  height: 80px;
  background-color: #fff;
  animation: animate4 1s ease-in 3s alternate;
}

@keyframes animate4 {
  0% {
    bottom: 0;
    opacity: 1;
  }
  100% {
    bottom: 100%;
    opacity: 1;
  }
}

<div class="wrapper">
  <h1 class="heading-one">We Redefine Interior Designing
    <span class="inner-border"></span>
    <span class="inner-border"></span>
    <span class="inner-border"></span>
    <span class="inner-border"></span>
  </h1>
</div>

Answer 1

与其使用时间偏移，不如将偏移集成到动画本身中。通过这种方式，@keyframes 声明描述了完整的循环，因此可以连续动画:

.inner-border:nth-child(1) {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  width: 80px;
  height: 6px;
  background-color: #fff;
  animation: animate1 4s ease-in 0s infinite;
}

@keyframes animate1 {
  0% {
    left: -80px;
    opacity: 1;
  }
  25% {
    left: 100%;
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

.inner-border:nth-child(2) {
  content: '';
  position: absolute;
  top: 0;
  right: -3px;
  height: 80px;
  width: 6px;
  background-color: #fff;
  animation: animate2 4s ease-in 0s infinite;
}

@keyframes animate2 {
  0% {
    top: -80px;
    opacity: 0;
  }
  25% {
    top: -80px;
    opacity: 1;
  }
  50% {
    top: 100%;
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

.inner-border:nth-child(3) {
  content: '';
  position: absolute;
  bottom: -3px;
  right: 0;
  height: 6px;
  width: 80px;
  background-color: #fff;
  animation: animate3 4s ease-in infinite;
}

@keyframes animate3 {
  0% {
    right: -80px;
    opacity: 0;
  }
  50% {
    right: -80px;
    opacity: 1;
  }
  75% {
    right: 100%;
    opacity: 1;
  }
  100% {
    right: 100%;
    opacity: 0;
  }
}

.inner-border:nth-child(4) {
  content: '';
  position: absolute;
  bottom: 0;
  left: -3px;
  width: 6px;
  height: 80px;
  background-color: #fff;
  animation: animate4 4s ease-in infinite;
}

@keyframes animate4 {
  0% {
    bottom: -80px;
    opacity: 0;
  }
  75% {
    bottom: -80px;
    opacity: 1;
  }
  100% {
    bottom: 100%;
    opacity: 1;
  }
}