我使用css3为SVG创建了一个动画,它在Chrome和Firefox中完美运行.它部分在Safari中工作但不能在Internet Explorer中工作(支持css动画的IE9 +)
见演示
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中正常工作吗?