How It Works
The .png
image represented below is clipped 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 with a pure CSS shape as I would like to implement my colour tween which will change the colour of the white wave you see in my demo above going from red to green.
NOTE: Black background is only being used for StackOverflow whereas my background may vary in colour.
Examples Of A Wave Effect
#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>
You may achieve text filled by an animated wave with several techniques. Here is an approach with SVG using the pattern element. The text is filled with a wave shaped pattern and the pattern is animated with SMIL animations. Here is what it looks like :
This approach will allow you to fill the pattern with a non plain background (like a gradient) and display your text over an image or any non plain background.
You can see this in action here : Animated wave clipped with text.
EDIT ----
I switched from CSS keyframe animations to SMIL animations for this example as Firefox doesn't support CSS keyframes on the elements defined in the
<defs>
tag yet (see https://bugzilla.mozilla.org/show_bug.cgi?id=1118710).