<div class="line"><div class="light"></div></div>

:root {
  --line-bg: #111;
  --line-height: 10px;
  --light-width: 50%;
  --light-cell-number: 8;
  --light-cell-width: calc(var(--line-height) * 3);
  --light-cell-separator-width: calc(var(--line-height) * 0.1);
  /* red light #ff000 */
  --light-color-on: rgba(255,0,0,1);
  --light-color-off: rgba(255,0,0,.25);
}

.line {
  position: relative;
  width: calc(((var(--light-cell-width) + var(--light-cell-separator-width)) * var(--light-cell-number)) - var(--light-cell-separator-width));
  height: var(--line-height);
  overflow: hidden;
  background: var(--line-bg);
  /* center */
  top: 50vh;
  left: 50vw;
  transform: translateX(-50%) translateY(-50%);
}

.line:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-image: repeating-linear-gradient(
    90deg,
    var(--light-color-off),
    var(--light-color-off) var(--light-cell-width),
    var(--line-bg) var(--light-cell-width),
    var(--line-bg) calc(var(--light-cell-width) + var(--light-cell-separator-width))
  );
  background-size: 200% 200%;
}

.light {
  position: absolute;
  top: 0;
  height: 100%;
  left: calc(var(--light-width) / 2 * -1); /* hidden start */
  width: var(--light-width);
  background: linear-gradient(90deg, transparent 0%, var(--light-color-on) 45%, var(--light-color-on) 55%, transparent 100%);
  animation: KITT 2s infinite ease-in-out alternate;
}

@keyframes KITT {
  0%, 100% {
    left: calc(var(--light-width) / 2 * -1);
  }
  50% {
    left: calc(100% - var(--light-width) / 2);
  }
}