Safari совместит CSS3 анимация на элементе SVG

Question

У меня странная ошибка, я не могу показаться, чтобы выяснить:

Я хочу, чтобы объединить два CSS анимации свойства (непрозрачность & преобразования: переводить), и моя цель является встроенным элементом SVG.

Комбинация совершенна в Chrome, беспокойна в Firefox и не работает в Safari.

Сафари, похоже, способны совершать то или иное, не в то же время. Не знаю, что происходит в IE на данный момент, когда я нахожусь на Mac.

См пример: http://jsfiddle.net/712xwmss/

Если кто-то может помочь заставить его работать гладко во всех 4-х браузеров было бы весьма признателен.

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

Вы должны обновить Safari, он фиксируется на последней версии.

Latest Safari version for Mac

Safari 5.1.7 (Windows)