CSS3 SVG动画在Safari中不起作用

我正在尝试用CSS动画制作SVG动画

Chrome做得很好，但在Safari中有些动画在状态之间跳跃。我不知道是什么引起的

这是钢笔：

SCSS文件：

svg{
背面可见性：隐藏；
}
#设备#电话{
不透明度：0；
转换：translateX（-50px）；
动画：phoneMove 2s；
动画填充模式：正向；
动画延迟：0s；
}
@移动关键帧{
0% {
不透明度：0；
transform:translateX（-50）；
}
100% {
不透明度：1；
变换：translateX（0）；
}
}

---

我可能错了，但您似乎没有使用任何css前缀（这是SASS，所以您可能会被编译一次）

熟悉：
1.我可以使用=>
2.我可以使用=>
3.我可以使用=>

---

或者更好的方法是，在编译SASS或其他CSS预处理器时运行CSS。

这一定是不透明动画的问题<代码>-webkit背面可见性：隐藏似乎不起作用：/Jason，谢谢你。我无法将动画添加到所需的svg图像。它使笔划具有动画效果。请您更新所需的。提前谢谢

@import "compass/css3";
svg {
  -webkit-backface-visibility: visible;
  -moz-backface-visibility: visible;
  backface-visibility: visible;
}

.phonec{
  opacity: 0;
  -webkit-transform: translateX(-50px);
  -ms-transform: translateX(-50px);
  transform: translateX(-50px);
  -webkit-animation: phoneMove 2s linear 0s
    forwards;
  animation: phoneMove 2s linear 0s
}
@-webkit-keyframes phoneMove {
  0% {
   opacity: 0;
   -webkit-transform: translateX(-50px);
   -ms-transform: translateX(-50px);
   transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
  }
}
@keyframes phoneMove {
 0% {
   opacity: 0;
   -webkit-transform: translateX(-50px);
   -ms-transform: translateX(-50px);
   transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
  }
}