Question

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

Chrome完美地做到了这一点，但在Safari中，一些动画在各个州之间跳跃。我无法弄清楚是什么导致它。

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

SCSS-File：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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.我可以使用=＆gt; backface-visibility
2.我可以使用=＆gt; transform
3.我可以使用=＆gt; animation
或者更好的是，在编译SASS或其他CSS预处理器时，通过AutoPrefixer运行CSS。

CSS3 SVG动画无法在Safari中运行

1 个答案: