如何实现以半圆底部为旋转轴的双向拆分圆形CSS动画？

要实现你需要的倒置🎊拆分效果，核心要解决旋转原点设置、元素重叠两个问题，以下是调整后的完整实现方案：

关键调整点 #

• 指定旋转原点：用transform-origin将旋转轴设置为半圆的底部端点——左半圆设为bottom right，右半圆设为bottom left，替代默认的中心旋转。
• 动画结合位移：旋转的同时添加水平位移，让两个半圆向外展开时不会互相遮挡。
• 对称动画配置：给右侧半圆添加反向动画，实现两侧同步展开的效果。

完整代码 #

CSS #

.circlecontainer {
  display: flex;
  justify-content: center;
  align-items: flex-end; /* 底部对齐，确保两个半圆旋转轴在同一水平线 */
  height: 300px; /* 给容器设置高度，固定布局基准 */
}

.halfright {
  width: 150px;
  height: 300px;
  border-top-right-radius: 150px;
  border-bottom-right-radius: 150px;
  background: orange;
  transform-origin: bottom left; /* 右半圆绕底部左端点旋转 */
  animation: splitright 3s forwards; /* 动画结束后保持最终状态 */
}

.halfleft {
  width: 150px;
  height: 300px;
  border-top-left-radius: 150px;
  border-bottom-left-radius: 150px;
  background: orange;
  transform-origin: bottom right; /* 左半圆绕底部右端点旋转 */
  animation: splitleft 3s forwards;
}

@keyframes splitleft {
  0% {
    transform: rotate(0deg) translateX(0);
  }
  100% {
    transform: rotate(-90deg) translateX(-50px); /* 旋转+左移避免重叠 */
  }
}

@keyframes splitright {
  0% {
    transform: rotate(0deg) translateX(0);
  }
  100% {
    transform: rotate(90deg) translateX(50px); /* 旋转+右移避免重叠 */
  }
}

HTML #

<div class="circlecontainer">
  <div class="halfleft"></div>
  <div class="halfright"></div>
</div>

补充说明 #

• align-items: flex-end保证两个半圆底部对齐，让旋转轴处于同一水平线，贴合倒置彩带的形态。
• translateX的位移值可以根据需求调整，确保展开过程中两个半圆完全不重叠。
• forwards参数让动画结束后停留在最终状态，不会自动回弹。

内容的提问来源于stack exchange，提问作者penguinpowers