I've been working on an ocean-themed landing page and wanted to add a dynamic touch to my website's top fold. My goal was to create the illusion of ocean waves moving at the top of the first section. Initially, I spent considerable time experimenting with custom SVG files and inserting code between sections, but the results weren't satisfactory.

After extensive research and multiple Google searches, I finally stumbled upon an elegant and surprisingly simple solution. The key? CSS from a buried GitHub page.

Instead of relying on complex SVGs or intricate JavaScript, I discovered that CSS alone could create the wave effect I wanted with Divi's baked in divider settings. This approach not only simplified the process but also resulted in a more efficient and easily maintainable code.

This code comes from a GitHub user @warderer

/* Animate WordPress Divi Top and Bottom Dividers */
/* HOW TO USE */
/* Add the following code to the Custom CSS box in Divi Theme Options */
/* Add the class "bg-animate-bottom" or "bg-animate-top" to the divi section divider */
.bg-animate-bottom .et_pb_bottom_inside_divider {
    -webkit-animation: scroll 150s linear infinite;
    -moz-animation: scroll 150s linear infinite;
    -ms-animation: scroll 150s linear infinite;
    -o-animation: scroll 150s linear infinite;
    animation: scroll 150s linear infinite;
}
.bg-animate-top .et_pb_top_inside_divider {
    -webkit-animation: scroll 150s linear infinite;
    -moz-animation: scroll 150s linear infinite;
    -ms-animation: scroll 150s linear infinite;
    -o-animation: scroll 150s linear infinite;
    animation: scroll 150s linear infinite;
}
    @-webkit-keyframes scroll {
        100%{background-position: 10000px center;}
    }
    
    @-moz-keyframes scroll {
        100%{background-position: 10000px center;}
    }
    
    @-o-keyframes scroll {
        100%{background-position: 10000px center;}
    }
    
    @keyframes scroll {
        100%{background-position: 10000px center;}
    }