body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    width: 96vw;
    display: flex;
    flex-direction: column;
}

.container div {
    width: inherit;
    height: 6vw;
    border-bottom: 0.2vw solid var(--border-color);
    background-image: repeating-linear-gradient(
        to right,
        var(--dark-color), var(--dark-color) 6vw,
        var(--light-color) 6vw, var(--light-color) 12vw
    );
    background-position: calc(var(--offset) * 1vw) 0;
    --border-color: gray;
    --dark-color: black;
    --light-color: white;
    animation: reveal 10s linear infinite;
}

.container div:first-child {
    border-top: 0.2vw solid var(--border-color);
}

@keyframes reveal {
    51%, 100% {
        --border-color: black;
        --dark-color: gray;
        --light-color: silver;
    }
}

.container div:nth-child(4n+1) {--offset: 1.5;}
.container div:nth-child(even) {--offset: 3.0;}
.container div:nth-child(4n+3) {--offset: 4.5;}