CSS3 एनीमेशन काम नहीं कर रहा है

Question

मैंने सीएसएस 3 का उपयोग करके एसवीजी के लिए एक एनीमेशन बनाया है जो क्रोम और फ़ायरफ़ॉक्स में पूरी तरह से काम कर रहा है। यह आंशिक रूप से सफारी में काम कर रहा है लेकिन इंटरनेट एक्सप्लोरर में काम नहीं कर रहा (IE9 + जो सीएसएस एनिमेशन का समर्थन)

See Demo

सीएसएस:

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

किसी को सुलझाने के लिए करने के लिए क्या करना है मेरी मदद कर सकते सफारी और आईई में भी इसे ठीक से काम करें?

Answer 1

CSS3 एनीमेशन IE9 में समर्थित नहीं हैं, जो बताता है कि यह IE9 में क्यों काम नहीं करता है। सफारी के लिए भी यही लागू होगा, यह प्रत्येक ब्राउज़र के संस्करण भी देने में मदद कर सकता है। कृपया समर्थित सुविधाओं की इस सूची का संदर्भ लें: http://caniuse.com/css-animation

Answer 2

जबकि CSS3 एनीमेशन IE9 में समर्थित हैं, एसवीजी एनिमेशन आईई 11 में भी समर्थित नहीं हैं और यह कहना मुश्किल है कि वे कभी भी होंगे या नहीं। आपको शायद एनिमेटेड एचटीएमएल तत्वों पर भरोसा करना होगा या जावास्क्रिप्ट का उपयोग करना होगा जो सीएसएस एनिमेशन को प्रस्तुत करने के लिए इस्तेमाल किए गए हार्डवेयर त्वरण से लाभ नहीं उठाएगा लेकिन फिर भी एक व्यवहार्य समाधान हो सकता है।

एक और विचार इसे प्रीरेंडर करना होगा और इसे हर बार या केवल आईई में एक gif के रूप में तैनात करना होगा।

स्रोत: http://caniuse.com/#feat=svg-smil

Answer 3

मैं raphaeljs जावास्क्रिप्ट पुस्तकालय का उपयोग कर सुझाव है। Svg एनिमेट करने में इसकी बड़ी क्षमता है। त्वरित पूर्वावलोकन -

राफेल अभी Chrome 5.0+ Firefox 3.0+, Safari 3.0+, ओपेरा 9.5+ और इंटरनेट एक्सप्लोरर 6.0+

http://raphaeljs.com/

http://raphaeljs.com/playground.html का समर्थन करता है।