Q:

Animate image independent of mask?

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

A:

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/)

