CSS3 SVG动画在Safari中不起作用

Question

我正在尝试使用 CSS Animations 为 SVG 设置动画。

Chrome 在这方面做得很好，但在 Safari 中，一些动画会在状态之间跳转。我不知道是什么原因造成的。

这是笔：http://codepen.io/rawcat/pen/OPoKeB

SCSS 文件：

svg{
  backface-visibility: hidden;
}

#devices #phone{
  opacity: 0;
  transform: translateX(-50px);
  animation: phoneMove 2s; 
  animation-fill-mode: forwards;
  animation-delay: 0s;
}

@keyframes phoneMove {
  0% {
    opacity: 0;
    transform: translateX(-50);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

<svg xmlns="http://www.w3.org/2000/svg" id="devices" version="1.2" baseProfile="tiny" id="devices" x="0" y="0" viewBox="0 0 640 480" xml:space="preserve">

  <g id="phone">
    <path fill="#5799C2" stroke="#20201E" stroke-width="6.88" stroke-miterlimit="10" d="M561.63 388.58c0 3.21-2.01 5.83-4.5 5.84H451.96c-2.49 0.01-5.02-2.33-5.03-5.55V199.64c0-3.22 2.01-6.1 4.5-6.11h105.17c2.48-0.01 5.02 2.6 5.02 5.81V388.58z"/>
    <rect x="449.61" y="367.99" fill="#20201E" width="110.2" height="25.01"/>
    <rect x="454" y="202" fill="#FFFFFF" width="100" height="71"/>
    <polygon fill="#5799C2" points="504.08 210.97 512.31 227.54 530.61 230.15 517.4 243.09 520.57 261.3 504.19 252.74 487.84 261.38 490.92 243.15 477.65 230.28 495.94 227.58 "/>
    <rect x="454" y="280" fill="#D7D7D7" width="100" height="32"/>
    <rect x="454" y="320" fill="#D7D7D7" width="100" height="32"/>
    <rect x="454" y="360" fill="#D7D7D7" width="100" height="8"/>
    <rect x="460.5" y="285.47" fill="#999999" width="50.82" height="4.77"/>
    <rect x="495.57" y="298.36" fill="#999999" width="50.82" height="4.76"/>
    <rect x="520.98" y="285.47" fill="#999999" width="25.77" height="4.77"/>
    <rect x="460.5" y="298.36" fill="#999999" width="25.77" height="4.76"/>
    <rect x="460.5" y="327.06" fill="#999999" width="50.82" height="4.76"/>
    <rect x="495.57" y="339.94" fill="#999999" width="50.82" height="4.76"/>
    <rect x="520.98" y="327.06" fill="#999999" width="25.77" height="4.76"/>
    <rect x="460.5" y="339.94" fill="#999999" width="25.77" height="4.76"/>
  </g>
  
</svg>

有什么想法吗？提前致谢。

Answer 1

我可能是错的，但您似乎没有使用任何 css 前缀（它是 SASS，因此您可以编译一次）。

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

熟悉CanIUse:
1. 我可以使用 => backface-visibility
2. 我可以使用 => transform
3. 我可以使用 => animation
或者更好的是，在编译 SASS 或其他 CSS 预处理器时通过 AutoPrefixer 运行 CSS。