CSS Wave Animated Text

Question

How it works

The .png image below is cropped to the text with animation;

---

In action

 body { background: #000000; } .Wave-Loader { text-transform: uppercase; font-family: 'Cabin Condensed', sans-serif; font-weight: bold; font-size: 100pt; text-align: center; height: 120px; line-height: 110px; vertical-align: bottom; position: absolute; left: 0; right: 0; top: 100px; bottom: 0; } .Wave-Loader.Wave { background-image: url("http://i.imgur.com/uFpLbYt.png"); -moz-background-clip: text; -o-background-clip: text; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0px 0px rgba(255, 255, 255, 0.06); animation: Wave-Loader 1s infinite linear; background-size: 200px 100px; background-repeat: repeat-x; opacity: 1; } @keyframes Wave-Loader { 0% { background-position: 0 bottom; } 100% { background-position: 200px bottom; } } 

 <div class="Wave-Loader Wave">loading</div> 

---

Question

Instead of using an image, how can I replace the pure CSS form, since I would like to implement my color animation, which will change the color of the white wave that you see in my demo above, from red to green.

NOTE. The black background is only used for StackOverflow, while my background may vary in color.

---

Wave Effect Examples

 #wave { position: relative; height: 70px; width: 600px; background: #000000; } #wave:before { content: ""; display: block; position: absolute; border-radius: 100% 50%; width: 340px; height: 80px; background-color: white; right: -5px; top: 40px; } #wave:after { content: ""; display: block; position: absolute; border-radius: 100% 50%; width: 300px; height: 70px; background-color: #000000; left: 0; top: 27px; } 

 <div id="wave"></div> 

 svg { display: inline-block; position: absolute; top: 0; left: 0; } .container { display: inline-block; position: relative; width: 100%; padding-bottom: 100%; vertical-align: middle; overflow: hidden; } 

 <div class="container"> <svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet"> <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:red;"></path> </svg> </div> 

Answer 1

You can reach text filled with an animated wave in several ways. The following is an SVG approach using a template element. The text is filled with a wave-like pattern, and the picture is animated with SMIL animation. Here's what it looks like:

This approach allows you to fill in a template with a non-simple background (for example, a gradient) and display text above the image or any non-main background.

You can see it in action herer: An animated wave clipped with text .

 body,html{margin:0;padding:0;height:100%;} body{ background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg'); background-size:cover; font-family: 'Cabin Condensed', sans-serif; display:flex; flex-direction:column; justify-content:center; align-items:center; } svg{font-weight:bold;max-width:600px;height:auto;} 

 <svg viewbox="0 0 100 20"> <defs> <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1"> <stop offset="5%" stop-color="#326384"/> <stop offset="95%" stop-color="#123752"/> </linearGradient> <pattern id="wave" x="0" y="0" width="120" height="20" patternUnits="userSpaceOnUse"> <path id="wavePath" d="M-40 9 Q-30 7 -20 9 T0 9 T20 9 T40 9 T60 9 T80 9 T100 9 T120 9 V20 H-40z" fill="url(#gradient)"> <animateTransform attributeName="transform" type="translate" begin="0s" dur="1.5s" from="0,0" to="40,0" repeatCount="indefinite" /> </path> </pattern> </defs> <text text-anchor="middle" x="50" y="15" font-size="17" fill="url(#wave)" fill-opacity="0.6">LOADING</text> <text text-anchor="middle" x="50" y="15" font-size="17" fill="url(#gradient)" fill-opacity="0.1">LOADING</text> </svg> 

EDIT ----

I switched from CSS keyframe animation to SMIL animations for this example, since Firefox does not yet support CSS keyframes for elements defined in the <defs> (see https://bugzilla.mozilla.org/show_bug.cgi?id= 1118710 ).