Question

我正在尝试为这些齿轮制作动画，并且它可以按照Chrome的预期工作。但是，在Firefox中，旋转原点是不同的，并且无法弄清楚如何解决这个问题。

我尝试过使用宽度，高度，视图和x＆amp; y属性，但似乎没有任何效果。

最后，在不支持我的图形/动画的其他/旧浏览器中为我的SVG路径提供适当的回退最佳做法是什么？

代码的其余部分位于：jsFiddle here （HTML + SVG代码太长而无法粘贴）

CSS：

#gear-head {
  position: fixed;
  background: #172235;
  width: auto;
  height: 100%;
}
#gear-head .gear {
  -webkit-animation: rotation 6s infinite linear;
  -moz-animation: rotation 6s infinite linear;
  -o-animation: rotation 6s infinite linear;
  animation: rotation 6s infinite linear;
  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
}
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
@-moz-keyframes rotation {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(359deg);
  }
}
@-o-keyframes rotation {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(359deg);
  }
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
#gear-head .pulsating {
  -webkit-animation: pulsate 6s ease-out;
  -webkit-animation-iteration-count: infinite;
  opacity: 0.5;
  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
}
@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(0.5, 0.5);
    opacity: 0.0;
  }
  50% {
    opacity: 1.0;
  }
  100% {
    -webkit-transform: scale(1.2, 1.2);
    opacity: 0.0;
  }
}

Answer 1

简单的解决方案是使用半高和半宽单位：

而不是transform-origin：50％50％;

获取svg的宽度和高度（例如：宽度=＆＃34; 234px＆＃34;高度=＆＃34; 186px＆＃34;）;将两个值除以2（分别得到117px和93px）;然后使用

transform-origin：117px 93px;

这适用于所有浏览器（我只在Safari，Chrome和Firefox上测试过）

在Firefox中旋转SVG CSS动画不起作用，并且需要SVG后退

1 个答案: