如何实现CSS动画中图片与圆形的同步过渡效果？

你的图片动画出现先左移再下移的问题，核心原因是同时修改left、bottom、width、height这些离散属性，浏览器对它们的过渡计算无法完全同步。改用transform的translate和scale来实现位移与缩放，能保证动画路径一致且同步，因为transform是浏览器优化的合成属性，可一次性完成所有变换。

以下是修复后的完整代码：

HTML #

<div class="wrapper">
  <div id="test" class="test"></div>
  <img src="./logo.svg" id="icon-img" class="before">
</div>

CSS #

.test {
  position: fixed;
  left: 20px;
  bottom: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: gray;
  border-radius: 50%;
  transform: scale(100);
  transition: transform 2s ease;
}

.test.active {
  transform: scale(1);
}

.wrapper {
  position: relative;
  height: 100vh;
}

.before {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50vw;
  height: 50vh;
  transition: transform 2s ease-in-out;
  /* 初始居中：translate(-50%,-50%) 配合top/left 50% */
  transform: translate(-50%, -50%) scale(1);
}

.before.active {
  /* 移到左下角：计算偏移量配合缩放 */
  transform: translate(calc(20px - 50%), calc(100vh - 60px - 50%)) scale(0.08);
  width: 40px;
  height: 40px;
}

JavaScript #

setTimeout(function() {
  const circle = document.getElementById("test");
  const img = document.getElementById("icon-img");

  circle.classList.add("active");
  img.classList.add("active");
}, 2000);

关键修改说明 #

1. 圆形动画简化：移除重复的left/bottom定义，仅保留transform: scale()的过渡，因为圆形位置从始至终固定在左下角，只需要缩放。
2. 图片动画统一用transform：
   • 初始状态通过top:50%+left:50%+translate(-50%,-50%)实现精准居中，避免父容器flex带来的位置计算偏差。
   • 激活状态通过translate计算左下角位置，同时配合scale缩小，让位移和缩放同步进行。
3. 统一过渡时长：圆形和图片的过渡时长保持一致，确保动画完全同步。

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