Safari kompatybilny CSS3 animacji na element SVG

Question

Mam dziwny problem, że nie może wydawać się dowiedzieć:

Chcę połączyć dwie właściwości animacji CSS (zadymienie & transform: tłumaczyć), a mój cel jest wbudowanym elementem SVG.

Kombinacja jest idealna w Chrome, wierna w Firefoksie i nie działa w Safari.

Safari wydaje się być w stanie wykonać tylko jedno, a nie jedno i drugie jednocześnie. Nie mam pojęcia, co dzieje się w IE w tej chwili, gdy jestem na Macu.

patrz przykład: http://jsfiddle.net/712xwmss/

Jeśli ktoś może pomóc to działa płynnie na wszystkich 4 przeglądarkach Byłoby bardzo mile widziane.

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

Należy zaktualizować Safari, jest ona ustalana na najnowszej wersji.

Latest Safari version for Mac

Safari 5.1.7 (Windows)