2014-06-19 21 views
10

Ho creato un'animazione per SVG utilizzando css3 che funziona perfettamente in Chrome e Firefox. E 'parzialmente lavorando in Safari, ma non funziona in Internet Explorer (IE9 + che supporta le animazioni CSS)L'animazione CSS3 non funziona

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

qualcuno mi può aiutare a risolvere cosa fare per farlo funzionare correttamente anche in Safari e IE?

+3

Non so cosa c'è di sbagliato nel tuo codice o se questa informazione ti è utile, ma dopo un'ora di crack del tuo codice, ** sono in grado di visualizzarlo senza animazione in IE **. Ho cambiato il 'fill-opacity' nel blocco CSS' svg * '. Controlla questo [fiddle] (http://jsfiddle.net/c87vY/4/) – Rohith

+0

Questo sembra un ripiego ideale in quanto l'animazione è la ciliegina e hai davvero bisogno di vedere la torta. – misterManSam

+0

+1 perché l'animazione è fantastica :) –

risposta

0

Le animazioni CSS3 non sono supportate in IE9, il che spiega perché non funziona in IE9. Lo stesso vale per Safari, potrebbe essere utile fornire anche le versioni di ciascun browser. Fare riferimento a questo elenco di funzionalità supportate:

+0

Morgan, Ok, sono d'accordo che non è supportato in IE9 ma dovrebbe funzionare per IE10 + e safari –

+0

Quali versioni però? Non stai dicendo quale versione di Safari. L'ho visto funzionare parzialmente nella versione 5.1.7. Ho ricreato la tua animaiton localmente ieri e avrei giurato che funzionasse in IE10. Appena controllato e d'oh! –

+0

Safari versione 5.1.7 –

4

Mentre le animazioni CSS3 sono supportate in IE9, le animazioni SVG non sono nemmeno supportate in IE11 ed è difficile dire se lo saranno mai. Probabilmente dovrai fare affidamento su elementi HTML animati o usare JavaScript che non trarrà vantaggio dall'accelerazione hardware utilizzata per il rendering delle animazioni CSS, ma potrebbe comunque essere una soluzione praticabile.

Un'altra idea sarebbe prerenderla e distribuirla come una gif, ogni volta o solo in IE.

Fonte: http://caniuse.com/#feat=svg-smil

+2

L'OP non sta utilizzando le animazioni SMIL, ma le animazioni css3: http://caniuse.com/#feat=css-animation – commonpike

Problemi correlati