/css

Moving Grid

Simple animation that moves a grid across the screen. You can modify the direction of movement by tinkering with background-position in @keyframes, add some blur with filter: blur(4px) for more style or even add another grid with pseudo elements ::before or ::after and reverse the keyframes.

css

.grid {
    width: 80%;
    height: 20rem;
    background-image: linear-gradient(90deg, blue 1%, transparent 5%),
    linear-gradient(270deg, blue 1%, transparent 5%),
    linear-gradient(180deg, blue 1%, transparent 5%),
    linear-gradient(0deg, blue 1%, transparent 5%);
    background-attachment: fixed;
    background-size: 3rem 3rem;
    animation: gridMove linear 150s infinite;
    border: 2px solid blue;
    transition: all;     
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;;
}

@keyframes gridMove {
    0%, 100% {
        background-position: 100% 0%;
    }
    25% {
        background-position: 0% 100%;
    }
    50% {
        background-position: -100% 0%;
    }
    75% {
        background-position: 0% -100%;
    }
}


@media screen and (min-width: 750px){
    .grid {
        width: 50%
    }
}

html

<div class="grid"></div>