How can I set up a static Webkit Mask

Thanks for taking the time to help me out. What I am trying to do is get a Webkit mask (developing for IOS) to stay in a static position and animate the image it is masking. I have been able to animate just the mask or the mask and image together but for the life of me can not figure out how to animate the image below the mask without the mask travelling with it.

Any solution needs to be pure HTML5, CSS, JS as I 开发者_如何学JAVAcan not build with any outside dependencies (jquery etc)

Any thoughts?

---

Have you tried setting the image as a background image and animating the background-position?

Here's an example using CSS3 to animate the background position, but you could just as easily use javascript: http://jsfiddle.net/blineberry/sRAfw/

Or you could use a wrapper for the mask and an img child element. position: absolute the img to the wrapper and animate the img's top/right/bottom/left styles: http://jsfiddle.net/blineberry/KdHCH/