如何为CSS中不同的transform变换设置不同的transition过渡效果

你遇到的问题核心是CSS的transform属性为全量覆盖规则，而非增量叠加。你在hover状态仅声明了scale(1.1)，相当于直接清空了初始设置的translate(30%)，因此过渡动画会同时作用于「位移从30%到0」和「缩放从1到1.1」两个变换过程，并非transition配置的逻辑问题。

方案1：hover状态保留原有位移声明（最简便） #

直接在hover的transform属性中同时写入原有位移和新增的缩放，保证前后变换仅scale值发生变化，transition就只会触发缩放动画。
修改后的完整代码：

/* 初始状态 */
.gal_img{
    width: 60%;
    border: 5px solid black;
    transform: translate(30%);
    /* 可替换原来的all配置，仅指定transform过渡，性能更优也避免多余动画 */
    transition: transform 0.1s;
}

/* hover状态 */
.gal_img:hover{
    /* 保留原有位移，叠加缩放效果 */
    transform: translate(30%) scale(1.1);
}

方案2：使用CSS变量简化维护 #

如果位移值后续可能调整，可以用CSS变量统一管理，避免多处修改：

.gal_img{
    --img-offset: 30%;
    width: 60%;
    border: 5px solid black;
    transform: translate(var(--img-offset));
    transition: transform 0.1s;
}

.gal_img:hover{
    transform: translate(var(--img-offset)) scale(1.1);
}

方案3：容器分层隔离变换（适合复杂场景） #

如果后续还有其他变换需求，可以将位移和缩放拆分到不同层级的元素上，完全隔离两种变换：

<!-- 外层容器仅负责位移 -->
<div class="gal_img_wrap">
    <img class="gal_img" src="你的图片地址" alt="">
</div>

.gal_img_wrap {
    transform: translate(30%);
}
.gal_img{
    width: 60%;
    border: 5px solid black;
    transition: transform 0.1s;
}
.gal_img:hover{
    transform: scale(1.1);
}

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