Animate image independent of mask? - css

Question

I'm trying to find a way to animate an image which has a masked applied to it without affecting the mask itself.
This has been the best cross-browser way I've found to apply a mask, but I'm uncertain how to apply CSS animations to it in such a way I can have the center image rotate inside the mask, and not both at the same time.
For example, my current code just rotates the entire image and mask together.
HTML
<div class="svgMask">
<svg width="726" height="726" baseProfile="full" version="1.2">
<defs>
<mask id="svgmask2" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" transform="scale(1)">
<image width="100%" height="100%" xlink:href="http://www.mikerezl.com/img/testmask.png"/>
</mask>
</defs>
<image id="interior" mask="url(#svgmask2)" width="100%" height="100%" y="0" x="0" xlink:href="http://www.mikerezl.com/img/valknut.jpg"/>
</svg>
</div>
CSS
#interior {
-webkit-animation-name: rotate;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-moz-animation-name: rotate;
-moz-animation-duration:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
}
#-webkit-keyframes rotate {
from {-webkit-transform:rotate(0deg);}
to { -webkit-transform:rotate(360deg);}
}
#-moz-keyframes rotate {
from {-moz-transform:rotate(0deg);}
to { -moz-transform:rotate(360deg);}
}
Fiddle link

Answer 1

You need to set the origin like this (http://jsfiddle.net/icodeforlove/f5RE4/1/)
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
but for me performance is horrible and firefox isnt working. i would suggest using a canvas to composite your image and animating on that.
context.save();
context.drawImage(valknut, 0, 0);
context.globalCompositeOperation = 'destination-in';
context.drawImage(mask, 0, 0);
context.restore();
by using a canvas you gain a lot of control! heres an example of how you would achieve this with a canvas (http://jsfiddle.net/f5RE4/)