CSS Text Mask Animation

Written by: Ivan in How-To, Web Technology

CSS Animations are finally here (well for Safari and Chome at least) and there are tons of little tricks you can achieve with only a few lines of code.

With WebKit support for CSS Image Masks we can create really neat effects with our text (unfortunately for now it only works with web-kit supported browsers like Safari and Chrome).

As I was looking for ways to work with WebKit Image Masks I found a really cool post by Trent Waltom that gave me  inspiration for this experiment. I decided to change it a little bit and to add a few things of my own. Hopefully soon enough a full CSS Animation support will be introduced across all browsers.

In this example I will be using some code from my last posts: How to use @font-face with Google Web Fonts and CSS Gradients and WebKit Image Masks on Text.

The Ocean Floor

OCEAN

OCEAN

OCEAN

For this experiment I created a basic layered image of an Ocean Floor. Then I saved the layers one by one, this way I could use them later on in my file.

Here are the files that I used:

The Sand

Some Fish

And the Wave


1. Lets start by creating a few divs that will serve as our base.

<div class="text_holder">
 <div id="sand"><h3>OCEAN</h3></div>
 <div id="fish"><h3>OCEAN</h3></div>  
 <div id="waves"><h3>OCEAN</h3></div>
</div>

The Text Holder will be used as a base for the other layers. The Ocean will be used as the mask to knock out the letters.

2. Now we can add our CSS styling to stack them all on top of each other. You can get Google Web Fonts links and the css styles from last week’s post. Please note that I am using Luckiest Guy font.

.text_holder {
 position: relative;
 height: 300px;
}
#sand {
 background-image: url(images/sand.jpg);
 background-repeat: repeat-x;
 height: 300px;
 position: absolute;
 top: 0px;
 width: 100%;
}
#fish {
 background-image: url(images/fish.png);
 background-repeat: repeat-x;
 height: 300px;
 position: absolute;
 top: 0px;
 width: 100%;
}
#waves {
 background-image: url(images/wave.png);
 background-repeat: repeat-x;
 position: absolute;
 top: 0px;
 height: 300px;
 width: 100%;
}
h3 {
 font-family: 'Luckiest Guy', arial, serif;
 font-size: 215px;
 letter-spacing: -6px;
 line-height: 1;
 margin-bottom: 10px;
 text-transform: uppercase;
 padding-top:10px;
 padding-bottom:10px;
 padding-right: 10px;
 padding-left: 10px;
 }

3. Now lets add CSS Image Masks and Animations. Sand doesn’t require an animation so we just add the text image mask style. For fish and wave we will add two separate animations with different timing. By doing so we will create a more natural feel.

#sand {
 background-image: url(images/sand.jpg);
 background-repeat: repeat-x;
 height: 300px;
 position: absolute;
 top: 0px;
 width: 100%;
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
 }
 #fish {
 background-image: url(images/fish.png);
 background-repeat: repeat-x;
 height: 300px;
 position: absolute;
 top: 0px;
 width: 100%;
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
 -webkit-animation-name:fish-animation;
 -webkit-animation-duration: 30s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
 }
 @-webkit-keyframes fish-animation {
 0% {background-position: 1200px bottom;}
 100% {background-position: left bottom;}
 }
 #waves {
 background-image: url(images/wave.png);
 background-repeat: repeat-x;
 position: absolute;
 bottom: 0px;
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
 -webkit-animation-name: wave-animation;
 -webkit-animation-duration: 15s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
 height: 300px;
 width: 100%;
 }
 @-webkit-keyframes wave-animation {
 0% {background-position: left bottom;}
 100% {background-position: 1200px top;}
 }

The result should look like this (You will see the text mask animation working only in Safari or Chrome):

OCEAN

OCEAN

OCEAN


This is just a small example of what can be done with text masks. To throw a few ideas out there, this technique could be used for a  sunrise, leafs falling, waterfall and snow falling.

Hope you enjoyed this tutorial. Please let us know if it was helpful, or if you have any notes and comments.

Comments are closed.