Question

我正在尝试在SVG上获得一个简单的CSS3动画。到目前为止，它在Firefox和Chrome中运行良好，但在Safari上无效。

我添加了@-webkit-keyframes所以它应该有效，但事实并非如此。我刚开始编码，所以到处都可能出错，但我确实需要帮助！

#EYEBROW2 {
  -webkit-animation: MoveEyebrow2 3s linear 2.2s 1 both;
  -webkit-transform-origin: 57% 10%;
  animation: MoveEyebrow2 3s linear 2.2s 1 both;
  transform-origin: 57% 10%;
}

@-webkit-keyframes MoveEyebrow2 {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(5.5px) rotate(4deg);
  }
  50% {
    transform: translateY(5.5px) rotate(4deg);
  }
  75% {
    transform: translateY(5.5px) rotate(4deg);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes MoveEyebrow2 {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(5.5px) rotate(4deg);
  }
  50% {
    transform: translateY(5.5px) rotate(4deg);
  }
  75% {
    transform: translateY(5.5px) rotate(4deg);
  }
  100% {
    transform: translateY(0px);
  }
}

<div>
  <svg width="500" height="100">
    <g id="EYEBROW2"> <g> <path class="st9" d="M415.4,26.1l-8.6-0.5C406.3,21.8,415.6,26.2,415.4,26.1z" stroke="black" fill="black"/> </g> </g>
  </svg>
</div>

但如果我尝试运行动画，一切都会出错！它就像它无法识别transform-origin点。

任何人都可以帮助我吗？

Css3动画SVG无法在Safari上运行

0 个答案: