Safari tương thích CSS3 Animation trên một yếu tố SVG

Tôi đã có một lỗi lạ tôi dường như không thể tìm ra:Safari tương thích CSS3 Animation trên một yếu tố SVG

Tôi muốn kết hợp hai thuộc tính CSS animation (opacity & transform: dịch), và mục tiêu của tôi là một phần tử SVG nội tuyến.

Kết hợp hoàn hảo trong Chrome, lo lắng trong Firefox và không hoạt động trong Safari.

Safari dường như chỉ có khả năng làm việc này hay cách khác, không phải cả hai cùng một lúc. Không có ý tưởng gì xảy ra trong IE lúc này khi tôi đang ở trên máy Mac.

Xem ví dụ: http://jsfiddle.net/712xwmss/

Nếu bất cứ ai có thể giúp nó hoạt động mượt mà trên tất cả 4 trình duyệt nó sẽ được đánh giá cao.

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

Nguồn

2015-08-17 Nelga

Phiên bản nào của Safari bạn đang sử dụng? Tôi đang sử dụng phiên bản 9 và có vẻ như hoạt hình hoàn toàn ổn. – Terry

Xin chào, tôi đang ở trên Safari v 8.0.6 (10600.6.3) – Nelga

Phiên bản Safari 9.1.1 (11601.6.17) - cùng một hành vi bị hỏng trên SMIL trong SVG. –