css - 动画图像独立于蒙版吗？

我正在尝试寻找一种方法来对应用了蒙版的图像进行动画处理而不会影响蒙版本身。

这是我发现应用蒙版的最佳跨浏览器方式，但是我不确定如何以这种方式将CSS动画应用到蒙版中，使中心图像在蒙版内旋转，而不能同时在蒙版内旋转同时。

例如，我当前的代码只是旋转整个图像和蒙版。
的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

最佳答案

您需要像这样设置原点（http://jsfiddle.net/icodeforlove/f5RE4/1/）

-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;

但对我而言，性能太差了，Firefox无法正常工作。我建议使用画布合成您的图像并对其进行动画处理。

context.save();
context.drawImage(valknut, 0, 0);
context.globalCompositeOperation = 'destination-in';
context.drawImage(mask, 0, 0);
context.restore();

通过使用画布，您可以获得很多控制权！这是一个如何使用画布（http://jsfiddle.net/f5RE4/）实现此目标的示例

关于css - 动画图像独立于蒙版吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24849152/