CSS animation rotate element in Firefox

Rotating SVG elements with CSS has a "bug" in FireFox (tested in v31). transform-origin does not work for svg elements. To rotate an element on a position other then top left you need to group the element with a position group and an animation group. Place the groups in the top-left corner of the SVG. Then calculate the postion of the element where it it should rotate and add the position of the element via css transform: translate(x,y);

Checkout the codepen: http://codepen.io/evertslagter/pen/Gcgjk