为什么我的缩放元素在 Web 动画过程中会偏离中心，如何修复它？

如何在缩放动画期间保持图像原点

在网页动画中，当缩放绝对位于另一个元素内的元素时，缩放后的元素可能会偏离中心。如果在动画过程中代表缩放元素的红色方块远离中心（由蓝色方块代表），则可以观察到这种情况。

问题原因

出现此问题是因为动画的变换属性覆盖了之前的平移变换。这将删除保持元素在中心对齐的平移。

解决方案

要解决此问题，我们需要将变换组合在同一个变换属性中，确保正确的

@keyframes ripple_large {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  75% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}

.to-animate {
  transform: translate(-50%, -50%);
}

说明

组合变换可确保在整个动画中保持平移，同时在其之上应用缩放变换。这使得元素可以在不偏离中心的情况下进行缩放。在这种情况下，transform-origin 属性不起作用。

更新的 HTML：

<div></div>

以上是为什么我的缩放元素在 Web 动画过程中会偏离中心，如何修复它？的详细内容。更多信息请关注PHP中文网其他相关文章！