SVG CSS Animation for IE and Safari not working - html

Question

Hi guys so im hitting a brick wall with 2 issues:
IE the pulse in the middle works but not the circular progress
In safari (win) the curcluar progress does not work
Firefox and Chrome work fine
Any ideas? i literally only have a few hours ot crack this.
NOTE: You have to click on the circle in order to start the animation. Thanks in advance for any help in cracking this for me.
JSFiddle: http://jsfiddle.net/0pkqk5r0/1/
HTML:
<div id="loader">
<svg height="80" width="80" viewBox="-10 -10 220 220">
<path id="back" d="M0,100 a100,100 0 1 0 200,0 a100,100 0 1 0 -200,0" fill="#FF1251" stroke="#FF1251" stroke-width="20" />
<path id="ring" d="M100,0 a100,100 0 0 1 0,200 a100,100 0 0 1 0,-200,0" fill="none" stroke="#FF1251" stroke-width="20" stroke-dasharray="629" stroke-linecap="round" stroke-dashoffset="629" />
</svg>
<div id="circle"></div>
</div>
CSS:
/* temp */
body {
background: #072237;
}
h3, p {
color: #ffffff;
}
#loader {
position: relative;
width: 80px;
height: 80px;
cursor: pointer;
}
#ring.active {
-webkit-animation: load 6s 1 forwards;
-moz-animation: load 6s 1 forwards;
-o-animation: load 6s 1 forwards;
-ms-animation: load 6s 1 forwards;
animation: load 6s 1 forwards;
}
#circle {
position: absolute;
width: 20px;
height: 20px;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -10px;
background: #FFFFFF;
border-radius: 50%;
}
#circle.active {
background: #FF1251;
-webkit-animation: pulse 1.2s 3;
-moz-animation: pulse 1.2s 3;
-o-animation: pulse 1.2s 3;
-ms-animation: pulse 1.2s 3;
animation: pulse 1.2s 3;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
/* Pulse */
#-webkit-keyframes pulse {
0% {
transform: scale(0.8);
}
20% {
transform: scale(1);
}
40% {
transform: scale(0.8);
}
100% {
transform: scale(0.8);
}
}
#-moz-keyframes pulse {
0% {
transform: scale(0.8);
}
20% {
transform: scale(1);
}
40% {
transform: scale(0.8);
}
100% {
transform: scale(0.8);
}
}
#-o-keyframes pulse {
0% {
-o-transform: scale(0.8);
transform: scale(0.8);
}
20% {
-o-transform: scale(1);
transform: scale(1);
}
40% {
-o-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-o-transform: scale(0.8);
transform: scale(0.8);
}
}
#-ms-keyframes pulse {
0% {
-ms-transform: scale(0.8);
transform: scale(0.8);
}
20% {
-ms-transform: scale(1);
transform: scale(1);
}
40% {
-ms-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-ms-transform: scale(0.8);
transform: scale(0.8);
}
}
#keyframes pulse {
0% {
transform: scale(0.8);
}
20% {
transform: scale(1);
}
40% {
transform: scale(0.8);
}
100% {
transform: scale(0.8);
}
}
/* Loading */
#-webkit-keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#-moz-keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#-o-keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#-ms-keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}

Answer 1

The shorthand animations will work on:
IE10+
Safari 9+
Use HTML+TIME for older versions of IE:
.time {behavior: url(#default#time2)}
<div id="circle" class="time" begin="0" end="2" timeAction="style">
Use longhand for older versions of Safari:
#circle.active {
-webkit-animation-name: pulse;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 3;
}
References
Introduction to CSS3 Animations
What's New in Safari
Safari CSS Visual Effects Guide
Internet Explorer 10 Guide for Developers
Internet Explorer 10 on Windows 7
HTML+TIME Specification
time2 Behavior
Using the HTML+TIME Document Object Model (DOM)
Animated DHTML
BUG: HTML+TIME Code Fails Inside an Element Behavior