:root {
  --stripe-size: 100px;
  --color1: #c44;
  --color2: #313131;
  --duration: 4s;
}

body {
  display: flex;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.stripe {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.stripe::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(-1 * var(--stripe-size));
  width: calc(100% + var(--stripe-size));
  height: 100%;
  background: repeating-linear-gradient(45deg, var(--color2) 25%, var(--color2) 50%, var(--color1) 50%, var(--color1) 75%);
  background-size: var(--stripe-size) var(--stripe-size);
  -webkit-animation: stripeTransform var(--duration) linear infinite;
          animation: stripeTransform var(--duration) linear infinite;
}


@keyframes stripeTransform {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(var(--stripe-size) * 1));
  }
}

@keyframes stripeBackgroundPosition {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: calc(var(--stripe-size) * 1) 0;
  }
}