CSS translate() 属性不适用于 :active selector

Question

所以我有一个很酷的小径向菜单，当您单击 FAB 时，它会突然弹出。它需要大量的动画和反复试验，特别是因为我是一个菜鸟，但最终它按照我想要的方式工作。但是我最近意识到我添加到我的 :active 属性之一的 transform(3px, 3px) 不起作用。这让我很困惑，因为完全相同的动画被添加到 FAB 并且在那里工作正常。你可以在这里看到整个 Action :(https://codepen.io/BGGrieco/pen/EmzRLw?editors=0100)，我注释掉了阴影动画，它起作用了，以引起人们注意 translate(3px, 3px) 不会发生的事实。
有效和无效的相关代码:

#fab
{
  position: absolute;
  color: white;
  font-size: 26px;
  text-align: center;
  width: 100%;
  height: 15%;
  background-color: #6eadea;
  border-radius: 50%;
  box-shadow: 6px 10px 18px #686868;
  display: none;
  z-index: 1;
}

#fab:active
{
  transform: translate(3px, 3px);
  box-shadow: 4px 6px 12px #585858;
}

^ 工作正常 ^

#top
{
  position: absolute;
  top: 0%;
  left: 34.5%;
  color: black;
  font-size: 26px;
  text-align: center;
  border-radius: 50%;
  width: 30%;
  height: 30%;
  background-color: #ffffff;
  box-shadow: 6px 16px 24px #999999;
}

#top:active
{
  transform: translate(3px, 3px);
  /*box-shadow: 6px 10px 18px #686868; COMMENTED THIS OUT TO FOCUS ON PROBLEM*/
}

^ Nada, nej, niet, zilch ^

我向互联网之神祈祷，我不会因为完全忘记某个地方的逗号或分号而(再次)自欺欺人。

Answer 1

transform:translate 不适用于该元素，因为该元素上设置了另一个内联转换样式，并且内联样式(通常)优先于 CSS 中定义的样式。查看 Chrome 检查器:

看起来您是在 Javascript 中设置的。请记住，所有变换属性都作为一个属性，因此如果您需要多个变换，如缩放和平移，它就变成了:

transform: translate(3px, 3px) scale(0, 0);

您将无法使用当前的 Javascript 覆盖转换属性，我建议您也将比例放在 CSS 中。