CSS 动画实现 div 形变与精准位移：从初始状态到目标状态的平滑过渡-js教程-PHP中文网

CSS 动画实现 div 形变与精准位移：从初始状态到目标状态的平滑过渡

本文详解如何通过 CSS @keyframes 实现一个 div 元素向另一个 div 的平滑形变动画，涵盖尺寸、位置、旋转、颜色等属性的无缝过渡，并解决常见“跳变”问题和 translate 偏移计算不准的痛点。

本文详解如何通过 css `@keyframes` 实现一个 div 元素向另一个 div 的平滑形变动画，涵盖尺寸、位置、旋转、颜色等属性的无缝过渡，并解决常见“跳变”问题和 translate 偏移计算不准的痛点。

要让 #div1 平滑“变形”为 #div2（即在视觉上完成位置、大小、旋转、背景色的连续过渡），核心在于：动画必须明确定义起始态（0%）与终止态（100%），且所有参与动画的属性需在两个关键帧中完整声明。你最初尝试的动画只定义了 100%，导致浏览器无法推断初始状态，从而引发突兀跳变——这是 CSS 动画中最常见的误区。

✅ 正确做法：完整声明 keyframes + 使用 transform 替代 layout 属性

避免直接动画 position、left、bottom 等触发布局重排（reflow）的属性。应统一使用 transform: translate() 控制位移，配合 width/height/background-color/transform: rotate() 实现高性能合成动画（GPU 加速）。

首先，获取 #div2 相对于 #div1 的相对偏移量（推荐用 JavaScript 动态计算，确保响应式兼容）：

function calculateTransform() {
  const div1 = document.getElementById('div1');
  const div2 = document.getElementById('div2');

  const rect1 = div1.getBoundingClientRect();
  const rect2 = div2.getBoundingClientRect();

  // 计算 translateX/Y：使 div1 的中心点移动至 div2 的中心点
  const centerX1 = rect1.left + rect1.width / 2;
  const centerY1 = rect1.top + rect1.height / 2;
  const centerX2 = rect2.left + rect2.width / 2;
  const centerY2 = rect2.top + rect2.height / 2;

  const tx = centerX2 - centerX1;
  const ty = centerY2 - centerY1;

  // 应用到 CSS 变量，供 keyframes 使用
  document.documentElement.style.setProperty('--tx', `${tx}px`);
  document.documentElement.style.setProperty('--ty', `${ty}px`);
}

// 页面加载及 resize 后重新计算
window.addEventListener('load', calculateTransform);
window.addEventListener('resize', calculateTransform);

然后，在 CSS 中定义完整动画（含 0% 和 100%）：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

:root {
  --tx: 0px;
  --ty: 0px;
}

#div1 {
  background-color: red;
  width: 100px;
  height: 100px;
  text-align: center;
  /* 关键：启用 transform 动画优化 */
  will-change: transform, width, height, background-color;
  animation: morph 2s ease-in-out forwards;
}

@keyframes morph {
  0% {
    width: 100px;
    height: 100px;
    background-color: red;
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    width: 80px;
    height: 120px;
    background-color: blue;
    transform: translate(var(--tx), var(--ty)) rotate(-10deg);
  }
}

⚠️ 注意事项：

forwards 必不可少：确保动画结束后元素保持在 100% 状态，否则会回退；

will-change 提升性能：提示浏览器对这些属性做 GPU 缓存；

避免 position: absolute 冲突：动画中的 #div1 保持文档流内定位（如 flex 容器中），仅靠 transform 移动，不破坏布局；

颜色过渡需 background-color 可动画：CSS 支持该属性的插值（无需额外 polyfill）；

若需更精细控制（如 easing 分段），可增加 25%、50% 等中间帧，但务必保证所有动画属性全程存在。