求助：实现元素旋转位移切换动画的CSS关键帧方案

我想要实现一段动画效果，通过旋转和位移来切换两个元素的位置。目前我尝试使用旋转和transform-origin属性，仅实现了旋转效果，没有达到预期的位移切换效果，恳请帮忙提供能实现该动画的正确关键帧写法？

<div class='rewinder'>
  <div class='cw'>
    <span>1</span>
  </div>
  <div class='ccw'>
    <div class='circle'></div>
  </div>
</div>

.rewinder {
  width: 187px;
  height: 300px;
  background-color: blue;
  display: flex;
}
.rewinder > div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 50%;
  width: 120px;
  height: 120px;
  position: relative;
}
.rewinder span {
  width: 10px;
  height: 10px;
  display: block;
  font-size: 5px;
  color: white;
  border: 1px solid white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}
.ccw {
  transform-origin: left;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: none;
  animation-play-state: running;
  animation-name: animationKF;
}
.cw {
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: none;
  animation-play-state: running;
  animation-name: animationKF;
  transform-origin: right;
}
.circle {
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50%;
}

@keyframes animationKF {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-180deg);
  }
}

解决方案 #

要实现旋转+位移的位置切换效果，仅靠旋转无法完成位移——transform-origin只是定义旋转中心，不会让元素自动移动到对面位置。需要在旋转的同时添加位移属性，让元素旋转后刚好到达目标位置。以下是修改后的完整代码：

<div class='rewinder'>
  <div class='cw'>
    <span>1</span>
  </div>
  <div class='ccw'>
    <div class='circle'></div>
  </div>
</div>

.rewinder {
  width: 187px;
  height: 300px;
  background-color: blue;
  display: flex;
}
.rewinder > div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 50%;
  height: 120px;
  position: relative;
}
.rewinder span {
  width: 10px;
  height: 10px;
  font-size: 5px;
  color: white;
  border: 1px solid white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}
.ccw {
  transform-origin: left center;
  animation: ccwRotate 3s ease infinite alternate;
}
.cw {
  transform-origin: right center;
  animation: cwRotate 3s ease infinite alternate;
}
.circle {
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50%;
}

/* 顺时针旋转+左移动画 */
@keyframes cwRotate {
  0% {
    transform: rotate(0deg) translateX(0);
  }
  100% {
    transform: rotate(180deg) translateX(-100%);
  }
}

/* 逆时针旋转+右移动画 */
@keyframes ccwRotate {
  0% {
    transform: rotate(0deg) translateX(0);
  }
  100% {
    transform: rotate(-180deg) translateX(100%);
  }
}

关键改动说明： #

• 拆分动画关键帧：给两个元素分别设置顺时针（cwRotate）和逆时针（ccwRotate）的旋转动画，方向相反保证切换逻辑正确
• 添加位移属性：在旋转的同时通过translateX(-100%)/translateX(100%)让元素移动自身宽度的距离，刚好到达容器另一侧
• 修正旋转中心：将transform-origin设置为侧边中点（right center/left center），确保旋转时围绕侧边中心转动
• 优化布局：调整子元素的flex和width属性，避免flex布局冲突，保证每个元素占容器50%宽度

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