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;
  }
}