Simple SVG and CSS Animation - svg

Question

I am learning to create and use SVG's, so far it has been pretty straightforward. I am having two issues that keep setting me back. (1) Animations only seem to work in FF. Chrome and IE are static. (2) I can make the SVG scale responsively, but when I do the animation centers will not scale. I tried using percentages in the "transform-origin" property but it does not seem to work as expected.
http://codepen.io/Shift2Design/pen/azgVRz
<style>
html, body {
background-color:#C2B59B;
padding:0;
margin:0;
width:100%;
height:100%;
position:relative; }
/*svg {width:100%; height:100%;}*/
#spinner {
animation: infinite-spinning 12s infinite linear;
transform-origin: 23.8px 133.2px 0;}
#spinnerSm {
animation: infinite-spinning 1s infinite linear;
transform-origin: 23.8px 133.2px 0;}
#gear {
animation: infinite-spinning-reversed 8s infinite linear;
transform-origin: 23.8px 133.2px 0;}
#keyframes infinite-spinning {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#keyframes infinite-spinning-reversed {
0% { transform: rotate(360deg); }
100% { transform: rotate(0deg); }
}
<style>
<!--<?xml version="1.0" encoding="utf-8"?>-->
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="420" height="158" viewBox="-186.3 54.2 420 158" xml:space="preserve">
<g id="background">
<rect x="-186.3" y="54.2" fill="#C2B59B" width="420" height="158"/>
</g>
<g id="horizontalBar">
<rect x="-186.3" y="126.9" fill="#D65F1D" width="420" height="12.6"/>
</g>
<g id="outerCircle">
<circle fill="#D65F1D" cx="23.8" cy="133.2" r="69"/>
</g>
<g id="circlemask">
<circle fill="#C2B59B" cx="23.8" cy="133.2" r="65"/>
</g>
<g id="spinner">
<g>
<path d="M23.8,194.4c-34,0-61.6-27.6-61.6-61.6c0-31,23-56.7,52.8-61v17.9c-20.1,4.1-35.2,21.9-35.2,43.1c0,24.3,19.7,44,44,44
c24.3,0,44-19.7,44-44c0-21.2-15.1-39-35.2-43.1V71.9c29.8,4.3,52.8,30,52.8,61C85.4,166.9,57.8,194.4,23.8,194.4z"/>
</g>
</g>
<g id="gear">
<g>
<path fill="#D65F1D" d="M66.5,139.4c0,0.8-0.7,1.8-1.6,2L54.6,143c-0.6,1.8-1.3,3.5-2.2,5.1c1.9,2.7,3.9,5.2,6,7.7
c0.3,0.4,0.6,0.9,0.6,1.4c0,0.5-0.2,0.9-0.5,1.3c-1.3,1.8-8.8,10-10.7,10c-0.5,0-1-0.2-1.4-0.5l-7.7-6c-1.6,0.8-3.3,1.6-5.1,2.1
c-0.4,3.4-0.7,7-1.6,10.3c-0.2,0.9-1,1.6-2,1.6H17.6c-1,0-1.9-0.7-2-1.7L14,164c-1.7-0.6-3.4-1.2-5-2.1l-7.8,5.9
c-0.4,0.3-0.9,0.5-1.4,0.5c-0.5,0-1-0.2-1.4-0.6c-2.9-2.7-6.8-6.1-9.2-9.3c-0.3-0.4-0.4-0.8-0.4-1.3c0-0.5,0.2-0.9,0.4-1.3
c1.9-2.6,3.9-5,5.8-7.6c-0.9-1.8-1.7-3.6-2.3-5.5l-10.2-1.5c-0.9-0.2-1.6-1.1-1.6-2v-12.3c0-0.8,0.7-1.8,1.5-2l10.3-1.6
c0.6-1.8,1.3-3.4,2.2-5.1c-1.9-2.7-3.9-5.2-6-7.7c-0.3-0.4-0.6-0.8-0.6-1.3c0-0.5,0.2-0.9,0.5-1.3c1.3-1.8,8.8-10,10.7-10
c0.5,0,1,0.2,1.4,0.6l7.7,5.9c1.6-0.8,3.3-1.6,5.1-2.1c0.4-3.4,0.7-7,1.6-10.3c0.2-0.9,1-1.6,2-1.6h12.3c1,0,1.9,0.7,2,1.7
l1.6,10.2c1.7,0.6,3.4,1.2,5,2.1l7.9-5.9c0.3-0.3,0.8-0.5,1.3-0.5c0.5,0,1,0.2,1.4,0.6c2.9,2.7,6.8,6.2,9.2,9.5
c0.3,0.3,0.4,0.8,0.4,1.2c0,0.5-0.2,0.9-0.4,1.3c-1.9,2.6-3.9,5-5.8,7.6c0.9,1.8,1.7,3.6,2.3,5.5l10.2,1.6c0.9,0.2,1.6,1.1,1.6,2
V139.4z M23.8,118.9c-7.8,0-14.2,6.4-14.2,14.2c0,7.8,6.4,14.2,14.2,14.2c7.8,0,14.2-6.4,14.2-14.2
C38,125.3,31.6,118.9,23.8,118.9z"/>
</g>
</g>
<g id="spinnerSm">
<g>
<path d="M23.8,145.1c-6.6,0-12-5.4-12-12c0-6,4.5-11,10.3-11.8v3.5c-3.9,0.8-6.8,4.2-6.8,8.4c0,4.7,3.8,8.5,8.6,8.5
c4.7,0,8.5-3.8,8.5-8.5c0-4.1-2.9-7.6-6.8-8.4v-3.5c5.8,0.8,10.3,5.8,10.3,11.8C35.7,139.7,30.4,145.1,23.8,145.1z"/>
</g>
</g>
</svg>
Thoughts/help? Thanks for reading.

Answer 1

You forgot to add the vendor prefix for webkit:
#spinnerSm {
animation: infinite-spinning 1s infinite linear;
-webkit-animation: infinite-spinning 1s infinite linear;
transform-origin: 23.8px 133.2px 0;}
#-webkit-keyframes infinite-spinning {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
etc...