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

如何在缩放时保持图像中心恒定

使用 CSS 动画缩放元素时，保持居中位置至关重要。然而，在某些情况下，缩放后的元素可能会偏离中心，如提供的小提琴所示。

根本问题是由动画覆盖原始平移转换引起的。在动画中指定新的变换时，它会掩盖初始定位，从而删除中心对齐所需的平移。

要纠正此问题，必须将两个变换组合在同一属性中，确保正确的顺序：初始平移后跟随缩放动画。下面更新的代码片段演示了这种方法：

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

通过遵循此顺序，元素在整个缩放动画中保持准确居中，保留其相对于其父元素的预期位置。

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