跨浏览器的 CSS 动画变化答案

【问题标题】：css animation changes across browsers跨浏览器的 CSS 动画变化
【发布时间】：2015-04-08 10:49:37
【问题描述】：

我正在使用动画 svg。问题是我在使用 Chrome 和 Firefox 时会遇到两种不同的行为。

这是fiddle。还有css：

@-webkit-keyframes breeze{
    0% {-webkit-transform: rotate(0deg);}
    50% {-webkit-transform: rotate(3deg);}
    100% {-webkit-transform: rotate(0deg);}
}
@keyframes breeze{
    0% {transform: rotate(0deg);}
    50% {transform: rotate(3deg);}
    100% {transform: rotate(0deg);}
}
#pine{
    -webkit-transform-origin: 50% 100%;
    -webkit-animation: breeze 5s ease-out infinite;
    transform-origin: 50% 100%;
    animation: breeze 5s ease-out infinite;     
    }

在 Chrome 中以我想要的方式制作动画，但在 Firefox 中，它将旋转点放在顶部而不是底部。

关于如何让它发挥作用的任何想法？

【问题讨论】：

查看此答案：stackoverflow.com/a/16708049/1064270。 Firefox 中的 svg transform-origin 属性似乎存在一些问题

标签： css firefox animation svg keyframe

【解决方案1】：

我建议仅将 svg 用于松树，并使用带有背景颜色的 div 作为背景。这在 FF 和 Chrome 中应该有相同的结果。

.bg {
  background: #ADDDD9;
  width: 559px;
  height: 346px;
}

svg {
  -webkit-transform-origin: 50% 100%;
  -webkit-animation: breeze 5s ease-out infinite;
  transform-origin: 50% 100%;
  animation: breeze 5s ease-out infinite;
}

<div class="bg">
  <!-- svg -->
</div>

我更新了小提琴，看看。 https://jsfiddle.net/k4wz32e6/

您可能需要重新保存 SVG，因为现在视图框的数字太大了。

【讨论】：

【解决方案2】：

我不知道为什么 transform-offset 在 Firefox 中不起作用，但是您可以通过将要旋转的对象的原点坐标放在您希望它旋转的点处来使事情变得更容易周围。

这样做的另一个好处是，您可以对位于 SVG 中其他任何位置的树使用完全相同的 CSS 规则；只需更改父 <g> 元素的 translate() 属性即可。

@-webkit-keyframes breeze {
  0% { -webkit-transform: rotate(0deg); }
  50% { -webkit-transform: rotate(3deg); }
  100% { -webkit-transform: rotate(0deg); }
}
@keyframes breeze {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}
#pine {
  -webkit-animation: breeze 5s ease-out infinite;
  animation: breeze 5s ease-out infinite;
}

<svg xmlns="http://www.w3.org/2000/svg" width="559" height="509"
     viewBox="0 0 559 509">
  <rect fill="#ADDDD9" width="559" height="346.7" />
  <g transform="translate(225.5,334.9)">
    <g id="pine">
      <path fill="#B8B6DA" d="M-57.6-86.3 0-320.1 57.5-86.3Z" />
      <path fill="none" stroke="#8D6EA9" stroke-width="3.6"
            stroke-linecap="round" d="M0 0 0-255.7M-20-183.5 0
            -165.6M-27-130.6 0-96.2 23.4-123.8M-13.9-232-.2-211.2
            13.9-218.3M22.2-195.6 1.9-173.1" />
    </g>
  </g>
</svg>

【讨论】：