CSS3动画不起作用

我已经使用css3为SVG创建了一个动画，它可以在Chrome和Firefox中完美运行。它是在Safari部分工作，但在Internet Explorer中无法正常工作（IE9 +支持CSS动画）CSS3动画不起作用

CSS：

@-webkit-keyframes dash { 
    70%,80% { 
    stroke-dashoffset: 0; 
    fill-opacity: 0; 
    } 

    85% { 
    fill-opacity: 0; 
    stroke-opacity: 1; 
    } 

    95% { 
    stroke: #17739D; 
    stroke-dashoffset: -301; 
    stroke-opacity: 0; 
    } 

    100% { 
    fill-opacity: 1; 
    stroke-dashoffset: -301; 
    } 
} 

@-ms-keyframes dash { 
    70%,80% { 
    stroke-dashoffset: 0; 
    fill-opacity: 0; 
    } 

    85% { 
    fill-opacity: 0; 
    stroke-opacity: 1; 
    } 

    95% { 
    stroke: #17739D; 
    stroke-dashoffset: -301; 
    stroke-opacity: 0; 
    } 

    100% { 
    fill-opacity: 1; 
    stroke-dashoffset: -301; 
    } 
} 

@-moz-keyframes dash { 
    70%,80% { 
    stroke-dashoffset: 0; 
    fill-opacity: 0; 
    } 

    85% { 
    fill-opacity: 0; 
    stroke-opacity: 1; 
    } 

    95% { 
    stroke: #17739D; 
    stroke-dashoffset: -301; 
    stroke-opacity: 0; 
    } 

    100% { 
    fill-opacity: 1; 
    stroke-dashoffset: -301; 
    } 
} 


@keyframes dash { 
    70%,80% { 
    stroke-dashoffset: 0; 
    fill-opacity: 0; 
    } 

    85% { 
    fill-opacity: 0; 
    stroke-opacity: 1; 
    } 

    95% { 
    stroke: #17739D; 
    stroke-dashoffset: -301; 
    stroke-opacity: 0; 
    } 

    100% { 
    fill-opacity: 1; 
    stroke-dashoffset: -301; 
    } 
} 

#Layer_1 { 
    margin-left: auto; 
    margin-right : auto; 
    top: 50%; 
    position: absolute; 
    left: 50%; 
    margin-left: -65px; 
    margin-top: -35px; 
} 

svg { 
    background: #fff; 
    display: block; 
} 

svg * { 
    stroke: #666; 
    #stroke: #17739D; 
    stroke-width: 1; 
    fill-opacity: 0; 
    stroke-dasharray: 350; 
    stroke-dashoffset: 440; 
} 

svg #bp_svg * { 

    -webkit-animation-name : dash; 
    -moz-animation-name : dash; 
    -ms-animation-name : dash; 
    animation-name : dash; 

    -webkit-animation-duration: 4s; 
    -moz-animation-duration: 4s; 
    -ms-animation-duration: 4s; 
    animation-duration: 4s; 

    -webkit-animation-timing-function : linear; 
    -moz-animation-timing-function : linear; 
    -ms-animation-timing-function : linear; 
    animation-timing-function : linear; 

    -webkit-animation-fill-mode : forwards; 
    -moz-animation-fill-mode : forwards; 
    -ms-animation-fill-mode : forwards; 
    animation-fill-mode : forwards; 
}

谁能帮我梳理一下做让它在Safari和IE中正常工作？

来源

2014-06-19 A.K

我不知道你的代码有什么问题，或者如果这些信息对你有帮助，但是在一小时的代码破解之后，**我能够在IE **中不显示动画的情况下显示它。我改变了CSS块'svg *'中的'fill-opacity'。选中这个[小提琴]（http://jsfiddle.net/c87vY/4/） – Rohith

这似乎是一个理想的后备，因为动画是结冰，你真的只需要看看蛋糕。 – misterManSam

+1，因为动画很酷:) –