如何在 CSS3 缩放动画期间保持元素居中？-css教程-PHP中文网

如何在 CSS3 缩放动画期间保持元素居中？

Patricia Arquette

发布： 2024-12-25 07:32:24

原创

819 人浏览过

How to Keep an Element Centered During CSS3 Scale Animations?

在 CSS3 缩放动画期间保持居中原点

在 CSS3 动画中，缩放元素有时会导致元素偏离中心（如果变换） -origin 属性配置不正确。以下是解决此问题并确保元素在整个动画中保持居中的方法。

保留居中原点的关键是将原始翻译（即中心点）包含在动画的变换属性中。这是因为应用新的变换会覆盖之前的任何变换。通过添加翻译，我们保持了元素的初始位置。

以下是调整后的 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;
  }
}

.to-animate {
  transform: translate(-50%, -50%); /* Maintains the original position */
}

登录后复制

通过此调整，元素将在缩放动画期间保持居中位置，确保原点（蓝色方块）与另一个容器（红色方块）的中心保持对齐。

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