Safari animazione CSS3 compatibile su un elemento SVG

Question

Ho uno strano bug che non riesco a capire:

voglio combinare due proprietà di animazione CSS (opacità & trasformare: tradurre), e il mio obiettivo è un elemento SVG in linea.

La combinazione è perfetta in Chrome, agevole in Firefox e non funziona in Safari.

Safari sembra capace solo di fare l'uno o l'altro, non entrambi allo stesso tempo. Non ho idea di cosa succede in IE al momento mentre sono su un Mac.

vedere Esempio: http://jsfiddle.net/712xwmss/

Se qualcuno può aiutare a farlo funzionare senza problemi su tutti i 4 i browser che sarebbe molto apprezzato.

SVG:

<svg width="28" height="65" viewBox="0 0 28 65" xmlns="http://www.w3.org/2000/svg" class="center-block svgscroll"> 
<title>Example</title> 
<g fill="none" fill-rule="evenodd"> 
    <path d="M5 44.7l7 6.953 7-6.953" class="svgarrow sa1" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> 
    <path d="M3 50.66l9 8.94 9-8.94" class="svgarrow sa2" stroke="blue" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> 
</g> 

CSS:

.svgarrow { 
    -moz-animation: drop 1s infinite; 
    -webkit-animation: drop 1s infinite; 
    animation: drop 1s infinite; 
} 
.svgarrow.sa1 { 
    -moz-animation-delay: 0.2s; 
    -webkit-animation-delay: 0.2s; 
    animation-delay: 0.2s; 
} 
.svgarrow.sa2 { 
    -moz-animation-delay: 0.1s; 
    -webkit-animation-delay: 0.1s; 
    animation-delay: 0.1s; 
} 

@-moz-keyframes drop { 
    0% { 
    -moz-transform: translateY(0px); 
    transform: translateY(0px); 
    opacity: 0; 
    } 
    100% { 
    -moz-transform: translateY(4px); 
    transform: translateY(4px); 
    opacity: 1; 
    } 
} 
@-webkit-keyframes drop { 
    0% { 
    -webkit-transform: translateY(0px); 
    transform: translateY(0px); 
    opacity: 0; 
    } 
    100% { 
    -webkit-transform: translateY(4px); 
    transform: translateY(4px); 
    opacity: 1; 
    } 
} 
@keyframes drop { 
    0% { 
    -moz-transform: translateY(0px); 
    -ms-transform: translateY(0px); 
    -webkit-transform: translateY(0px); 
    transform: translateY(0px); 
    opacity: 0; 
    } 
    100% { 
    -moz-transform: translateY(4px); 
    -ms-transform: translateY(4px); 
    -webkit-transform: translateY(4px); 
    transform: translateY(4px); 
    opacity: 1; 
    } 
} 

Answer 1

Si consiglia di aggiornare Safari, Si fissa sulla versione più recente.

Latest Safari version for Mac

Safari 5.1.7 (Windows)