适用于IE和Safari的SVG CSS动画不起作用

Question

嗨，伙计们，我遇到了 2 个问题的砖墙：

1. IE中间的脉冲有效，但循环进度不工作
2. 在野生动物园（获胜）中，curcluar 进度不起作用
3. 火狐和铬工作正常

有什么想法吗？ 我实际上只有几个小时来破解这个。

注意：您必须单击圆圈才能开始动画。提前感谢您为我破解此问题的任何帮助。

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

速记动画将适用于：

• IE10+
• 野生动物园 9+

将HTML+TIME用于旧版本的IE：

.time {behavior: url(#default#time2)}
<div id="circle" class="time" begin="0" end="2" timeAction="style">

对于旧版本的 Safari，请使用手写：

#circle.active {
 -webkit-animation-name: pulse;
 -webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 3;
}

引用

• CSS3 动画简介
• Safari 浏览器中的新增功能
• Safari CSS 视觉效果指南
• Internet Explorer 10 开发人员指南
• Windows 7 上的 Internet Explorer 10
• HTML+时间规范
• 时间2 行为
• 使用 HTML+TIME 文档对象模型 （DOM）
• 动画 DHTML
• 错误：HTML+TIME 代码在元素行为中失败