關鍵幀在Safari

Question

不工作我有CSS代碼下面：

@-webkit-keyframes scale { 
    0% { 
     -webkit-transform: scale(0.1, 0.1) translate(-50px); 
     opacity: 0; 
    } 
    50% { 
     opacity: 1; 
     -webkit-transform: scale(1.1, 1.1) translate(0px); 
    } 
    100% { 
     opacity: 0; 
    } 
    } 



    @keyframes scale { 
    0%{ 
     transform:scale(0.1,0.1) translate(-50px); 
     opacity: 0; 
    } 
    50% { 
     opacity: 1; 
     transform:scale(1.1,1.1) translate(0px); 
    } 
    100%{ 
     opacity: 0; 
    } 
    } 
.mkt07{ 
    animation: scale 1.5s infinite forwards ease-in-out; 
    -webkit-animation: scale 1.5s infinite forwards ease-in-out; 
    } 

在Chrome，Safari瀏覽器上一點點在Firefox不同，但沒有工作...我不知道爲什麼。

更新 -

我的版本的Safari 8.0.6 -

主要的所有路徑的級別： -

.whatWeDoIcon{ 
fill: none; 
stroke: $mediumPurple; 
stroke-miterlimit: 10; 
stroke-width: 8; 
} 

我的Html元素：

<i> 
<svg id="marketing360" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 270 245.8"> 
<path class="whatWeDoIcon mkt01" d="M81.6 155v64.1c0 8.5-6.9 15.4-15.4 15.4s-15.4-6.9-15.4-15.4v-6.6l15.1-1.2-15.1-1.1v-14l15.2-1.7-15.2-1.2v-13l15.2-1.2-15.2-1v-14.7l15.1-.9-15.1-1.2V155c0-3.2 1-6.1 2.6-8.6"/> 
<path class="whatWeDoIcon mkt02" d="M93.6 77.9H42.4c-4.1 0-7.5 3.4-7.5 7.5v37.5-30.3c-1.6-2.2-4.2-3.6-7.2-3.6h-1.3c-4.9 0-8.9 4-8.9 8.9V124c0 4.9 4 8.9 8.9 8.9h1.3c2.9 0 7.2-3.3 7.2-3.6v7.2c0 4.1 3.4 7.5 7.5 7.5h51.2c4.1 0 7.5-3.4 7.5-7.5V85.4c0-4.1-3.3-7.5-7.5-7.5z"/> 
<path class="whatWeDoIcon mkt03" d="M184.2 29.9V196L112 162c-6.3-3.4-10.8-6.8-10.8-20.7V77.9c0-8.1 1.9-12.9 9.8-17.2l75.8-43c3.6-2.1 7.2-3.3 11.1-3.3 8.6 0 15.6 6.9 15.6 15.4v156.5c0 8.5-7 15.4-15.6 15.4-3.1 0-5.9-.9-8.4-2.4"/> 
<path class="whatWeDoIcon mkt04" d="M116.2 104.3v11.9"/> 
<path class="whatWeDoIcon mkt05" d="M116.2 95.3c0-11.6-1.7-20.2 11.8-24.8l13.8-5.5"/> 
<path class="whatWeDoIcon mkt06" d="M217.4 129.5V89.7s18-.2 18 19.7c-.1 18.2-18 20.1-18 20.1z"/> 
<path class="whatWeDoIcon mkt07" d="M246.2 85s9.3 8.7 9.3 26.7-10.8 25-10.8 25"/> 
</svg> 
</i> 

謝謝各位

Answer 1

我有Safari 9.0.2，它適合我。但嘗試添加-webkit前綴@keyframes像這樣：

@keyframes scale { 
    0%{ 
    -webkit-transform: scale(0.1, 0.1) translate(-50px); 
    transform:scale(0.1,0.1) translate(-50px); 
    opacity: 0; 
    } 
    50% { 
    opacity: 1; 
    -webkit-transform:scale(1.1,1.1) translate(0px); 
    transform:scale(1.1,1.1) translate(0px); 
    } 
    100%{ 
    opacity: 0; 
    } 
} 

更新：我forked你的筆，並增加了一些-webkit前綴。那對你來說怎麼樣？