The code!

First we will create the HTML code and link to the stylesheet in our case "test.css"

<!doctype html> <html> <head> <meta charset="utf-8"/> <title>Test</title> <link rel="stylesheet" href="test.css" /> </head> <body> <div class="loader"> <h1>Water</h1> </div> </body> </html>then we create the CSS codebody{ margin: 0; padding: 0; background-color: #262626; font-family: Arial; } .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .loader h1{ padding: 0; margin: 0; text-transform: uppercase; font-size: 10em; color: rgba(255, 255, 255, .1); background-image: url(fishy.png); background-repeat: repeat-x; -webkit-background-clip: text; animation: animate 15s linear infinite } @keyframes animate { 0% { background-position: left 0px top 80px; } 40% { background-position: left 800px top -50px; } 80% { background-position: left 1800px top -50px; } 100% { background-position: left 2400px top 80px; } } you will also need the image you want to scroll in our case "fishy.png" and that is that now you have your ANIMATION!