关键在于用transition控制transform变化，需将scale与translate合并书写于同一transform声明中，如transform: scale(0.8) translatex(100px)，并配以transition: transform 0.35s ease-out，避免与animation混用或分开设置导致覆盖。

关键在于用 transition 控制 transform 的变化，而不是拆开写或混用 animation，同时确保缩放（scale）和位移（translate）在同一个 transform 值里组合生效。

合并 transform 值，避免覆盖

浏览器只认一个 transform 声明，不能分别给 scale 和 translate 设过渡。如果先写 transform: scale(0.8)，再写 transform: translateX(100px)，后者会完全覆盖前者，导致缩放丢失。

• ✅ 正确写法：把多个变换函数写在同一行，例如 transform: scale(0.8) translateX(100px)
• ✅ 悬停时也保持结构一致：.box:hover { transform: scale(1.2) translateX(50px) }
• ❌ 错误写法：分开设置、或用 JS 多次赋值 style.transform 而不合并

transition 必须作用于 transform 属性本身

transition 不是万能的，它只对支持动画的属性起作用。transform 是其中之一，但必须明确指定，不能靠 all 侥幸生效（尤其在复杂场景下容易失效）。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• ✅ 推荐写法：transition: transform 0.35s ease-out
• ✅ 可加缓动优化观感，比如 cubic-bezier(0.34, 1.56, 0.64, 1) 让结束更轻盈
• ❌ 避免写成 transition: all 0.3s 或漏掉单位（如写成 0.3 而非 0.3s）

注意缩放原点和容器边界

scale 默认以元素中心为基准，位移后若没控制好溢出，可能造成布局抖动或内容被切掉。

• 可设 transform-origin: center（默认）或 top left 等，配合位移方向调整视觉重心
• 父容器建议加 overflow: hidden，防止放大+位移后边缘露馅
• 若用于图片轮播等动态场景，还需强制一次重排（如读取 offsetHeight）来确保初始 transform 立即生效

别和 keyframes 动画混用

CSS 动画（@keyframes + animation）会接管 transform 控制权，覆盖 JS 或 :hover 设置的内联 transform，导致交互失效。

• ✅ 交互动画优先用 transition + :hover 或 class 切换
• ✅ 自动轮播类需求，改用 JS 控制 class，再靠 transition 过渡，而非 animation
• ❌ 不要在同一元素上同时写 animation 和频繁修改 style.transform

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！