Hoạt ảnh CSS3 không hoạt động

Question

Tôi đã tạo hoạt ảnh cho SVG bằng css3 đang hoạt động hoàn hảo trong Chrome và Firefox. Nó là một phần hoạt động trong Safari, nhưng không làm việc trong Internet Explorer (IE9 + có hỗ trợ hình ảnh động css)

See Demo

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

bất cứ ai có thể giúp tôi để sắp xếp ra phải làm gì để làm cho nó hoạt động đúng trong Safari và IE?

Answer 1

Hoạt ảnh CSS3 không được hỗ trợ trong IE9, điều này giải thích tại sao nó không hoạt động trong IE9. Điều tương tự cũng áp dụng cho Safari, nó cũng có thể giúp cung cấp cho các phiên bản của mỗi trình duyệt. Vui lòng tham khảo danh sách các tính năng được hỗ trợ: http://caniuse.com/css-animation

Answer 2

Trong khi hoạt ảnh CSS3 được hỗ trợ trong IE9, hoạt ảnh SVG thậm chí không được hỗ trợ trong IE11 và thật khó để biết liệu chúng có bao giờ hoạt động hay không. Bạn có thể phải dựa vào các yếu tố HTML động hoặc sử dụng JavaScript sẽ không được hưởng lợi từ tăng tốc phần cứng được sử dụng để tạo hoạt ảnh CSS nhưng vẫn có thể là một giải pháp khả thi.

Một ý tưởng khác là định trước và triển khai nó dưới dạng gif, mỗi lần hoặc chỉ trong IE.

Nguồn: http://caniuse.com/#feat=svg-smil

Answer 3

Tôi khuyên bạn nên sử dụng thư viện javascript raphaeljs. Nó có khả năng tuyệt vời trong hoạt hình svg.

Raphael hiện hỗ trợ Chrome 5.0+ Firefox 3.0+, Safari 3.0+, Opera 9.5+ và Internet Explorer 6.0+

http://raphaeljs.com/

http://raphaeljs.com/playground.html - xem trước nhanh chóng.