CSS3 Background-Clip: Text

I had a lot of fun dabbling in CSS3 on a recent post, but had to hold back a bit to keep things looking presentable in most browsers. To carry out the DIN typeface I chose into the header, I used a transparent png with the letters knocked out to achieve that subtle yellow to blue fade animation. After seeing a shot of my code on Dribbble, Chandler Van De Water challenged me to create the effect with selectable text. Happy to oblige, I came up with this example:

.masked{
background: url(/bgclip/img/paint.png) repeat, white;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-animation-name: masked-animation;
-webkit-animation-duration: 40s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes masked-animation {
0% {background-position: left bottom;}
100% {background-position: right bottom;}
}


At the moment it will only work in webkit, so fire up Safari or Google Chrome.