Html IE和Safari的SVG CSS动画不工作

大家好，我遇到了两个问题：

中间的脉冲而不是圆形的进展 在safari win中，curcluar进度不起作用 Firefox和Chrome运行良好 有什么想法吗？实际上，我只有几个小时的时间来破解这个

注意：必须单击圆才能开始动画。提前谢谢你帮我破解这个

JSFiddle：

HTML:

---

速记动画将用于：

IE10+ 狩猎9+ 对旧版本的IE使用HTML+时间：

.time {behavior: url(#default#time2)}

<div id="circle" class="time" begin="0" end="2" timeAction="style">

参考资料

---

无法帮助w/ie，但对于safari，您必须在pulse动画中添加构造器特定的-webkit-变换前我已经有了-网站-变换前没有？啊，太好了，加载一个有什么想法吗？您是指红色填充圈吗？在Safari 7.1.2中无法再现您的问题是，在Safari中，围绕主要外部的主要边界/笔划似乎只是产生脉冲，而不是外部的加载效果。5.1.7 safari，可能会更新。

/* 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;
    }
}

.time {behavior: url(#default#time2)}

<div id="circle" class="time" begin="0" end="2" timeAction="style">

#circle.active {
 -webkit-animation-name: pulse;

 -webkit-animation-duration: 2s;

-webkit-animation-timing-function: linear;

-webkit-animation-iteration-count: 3;
}