在动画元素上使用缩放和平移会弄乱变换原点 [重复]答案

【问题标题】：Using scale and translate on animated element messes up the transform-origin [duplicate]在动画元素上使用缩放和平移会弄乱变换原点 [重复]
【发布时间】：2020-09-13 00:27:04
【问题描述】：

尝试使用 Web Speech API 创建一个动画麦克风组件，我将根据它是否正在收听进行切换。当它处于聆听模式时，我想展示一个动画波纹效果，该效果是通过关键帧对其进行缩放来实现的。我还将波纹伪元素绝对定位在我使用translate 的中心，这会破坏它的transform-origin。我尝试将其设置在中心，但它不起作用。知道为什么吗？

.mic-container{
  width: 52px;
  height: 166px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #6593c3;
  border-radius: 3px;
}
button{
  background: none;
  border: none;
  outline: none;
  position: relative;
}
button::before {
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: scale(0) translate(-50%, -50%);
  transform-origin: center center;
  border-radius: 100%;
  background-color: #6593c3;
  z-index: 0;
  transition: 1.5s all ease;
  animation: ripple 1.5s infinite;
}
@keyframes ripple {
  0% {
    trasform: scale(1.2);
  }
  50% {
    transform: scale(1.8);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

<div class='mic-container'>
  <button>
    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 20.7129C17.5605 20.7129 19.6289 18.5156 19.6289 15.8203V6.76758C19.6289 4.07227 17.5605 1.875 15 1.875C12.4395 1.875 10.3711 4.07227 10.3711 6.76758V15.8203C10.3711 18.5156 12.4395 20.7129 15 20.7129Z" fill="#4976A6"/>
<path d="M21.5039 11.25V15.9199C21.5039 19.4473 18.5859 22.3184 15.0586 22.3184C11.5312 22.3184 8.61328 19.4473 8.61328 15.9199V11.25H7.5V15.9199C7.5 19.8574 10.6055 23.1035 14.5312 23.3906V27.0703H10.2539V28.125H19.6875V27.0703H15.6445V23.3906C19.5117 23.1035 22.5 19.8574 22.5 15.9199V11.25H21.5039Z" fill="#6593C3"/>
</svg>
  </button>
</div>

【问题讨论】：

标签： html css css-animations

【解决方案1】：

首先，你应该使用transform-origin: 0 0;

默认情况下，变换的原点是中心。

transform-origin CSS property

这里还有一个错字。是transform 不是trasform

 0% {
    trasform: scale(1.2);
  }

.mic-container {
  width: 52px;
  height: 166px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #6593c3;
  border-radius: 3px;
}

button {
  background: none;
  border: none;
  outline: none;
  position: relative;
}

button::before {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: scale(0) translate(-50%, -50%);
  transform-origin: 0 0;
  border-radius: 100%;
  background-color: #6593c3;
  z-index: 0;
  transition: 1.5s all ease;
  animation: ripple 1.5s infinite;
}

@keyframes ripple {
  0% {
    transform: scale(1.2) translate(-50%, -50%);
  }
  50% {
    transform: scale(1.8) translate(-50%, -50%);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.4) translate(-50%, -50%);
    opacity: 0;
  }
}

<div class='mic-container'>
  <button>
    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 20.7129C17.5605 20.7129 19.6289 18.5156 19.6289 15.8203V6.76758C19.6289 4.07227 17.5605 1.875 15 1.875C12.4395 1.875 10.3711 4.07227 10.3711 6.76758V15.8203C10.3711 18.5156 12.4395 20.7129 15 20.7129Z" fill="#4976A6"/>
<path d="M21.5039 11.25V15.9199C21.5039 19.4473 18.5859 22.3184 15.0586 22.3184C11.5312 22.3184 8.61328 19.4473 8.61328 15.9199V11.25H7.5V15.9199C7.5 19.8574 10.6055 23.1035 14.5312 23.3906V27.0703H10.2539V28.125H19.6875V27.0703H15.6445V23.3906C19.5117 23.1035 22.5 19.8574 22.5 15.9199V11.25H21.5039Z" fill="#6593C3"/>
</svg>
  </button>
</div>

【讨论】：

我明白我需要在关键帧中包含translate。但为什么它会在 50% 的比例下抖动？
因为动画中不存在翻译，并且您仅使用比例覆盖了变换。这是我的理解

【解决方案2】：

当您声明 @keyframes 动画时，您正在编写 transform 的行，例如 transform: scale(1.2);，因此删除了您之前设置的翻译部分。

您还需要像这样设置原始元素：

  transform-origin: 0 0;
  transform: scale(3) translate(-50%, -50%);

要让它正常工作，您必须在您的 transform 声明中保留 translate 部分，如下所示：

@keyframes ripple {
  0% {
    trasform: scale(1.2) translate(-50%, -50%);
  }
  50% {
    transform: scale(1.8) translate(-50%, -50%);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.4) translate(-50%, -50%);
    opacity: 0;
  }

【讨论】：