如何在 CSS3 缩放动画期间保持图像居中？

如何在动画过程中保持图像居中？

在类似于您提供的小提琴中所示的情况下，CSS3 动画在以中心为中心的另一个元素的绝对位置缩放元素时，您可能会在动画过程中遇到该元素未对齐的情况。具体来说，它可能会出现偏离中心的情况，如小提琴中的红色方块所示。

为了解决这个问题，我们可以修改transform-origin属性。当新的变换（在动画内）覆盖原始变换时，就会出现问题。在这种情况下，原始变换用于保持元素的居中对齐。

为了避免此问题，我们必须将变换组合在同一变换属性中，确保顺序正确。以下代码说明了正确的方法：

@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;
  }
}

以上是如何在 CSS3 缩放动画期间保持图像居中？的详细内容。更多信息请关注PHP中文网其他相关文章！