首页 > web前端 > css教程 > 如何在 CSS3 缩放动画期间保持元素居中?

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

Patricia Arquette
发布: 2024-12-25 07:32:24
原创
817 人浏览过

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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板