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上工作，在Firefox上有点不同，但在Safari上没有任何内容......我不知道为什么。

更新 -

我的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前缀。那对你来说怎么样？

关键帧在Safari中不起作用

1 个答案: