如何用CSS实现图片线性移动并缩小？动画异常问题求助

问题描述 #

网格单元格内的图片需要动画至页面左上角附近的绝对位置，但当前动画会先向错误方向（右上）缩小移动，随后跳至网格外再向目标方向（左上）移动，无法实现平滑过渡。该动画前还有一个基于transform和rotate实现的左侧飞入动画slide-in-from-left。

问题原因 #

1. position属性无法动画：关键帧中切换position: relative到position: absolute会触发布局跳变，导致动画中断。
2. transform属性覆盖丢失：shrink-to-top动画未继承之前的rotateZ(-40deg)变换，导致动画开始时旋转状态丢失，方向错误。
3. width/height动画效率低：直接修改宽高会触发浏览器重排，不如transform: scale()平滑。

修复方案 #

修正后的CSS代码

.logo-box {
  position: relative; /* 可选：若需图片相对父元素定位，否则可移除 */
}
.logo-box__logo {
  transform: rotateZ(-40deg);
  transform-style: preserve-3d;
  width: 30rem;
  height: 30rem;
  position: absolute; /* 提前设置定位，避免动画中切换 */
}
.slidein {
  animation: slide-in-from-left 1.5s ease 0s 1 normal forwards;
}
.shrink {
  animation: shrink-to-top 1.5s linear 2s 1 normal forwards;
}
@keyframes slide-in-from-left {
  from {
    transform: translateX(-1000px) rotateZ(-40deg);
  }
  to {
    transform: translateX(0) rotateZ(-40deg);
  }
}
@keyframes shrink-to-top {
  from {
    transform: rotateZ(-40deg) scale(1) translate(0, 0);
    width: 30rem;
    height: 30rem;
  }
  to {
    transform: rotateZ(-40deg) scale(0.333) translate(calc(-50% + 2%), calc(-50% + 2%));
    width: 10rem;
    height: 10rem;
  }
}

关键调整说明

• 移除position动画：提前给图片设置position: absolute，避免动画中切换定位属性导致的跳变。
• 保留变换状态：在两个动画的关键帧中都保留rotateZ(-40deg)，确保旋转状态贯穿整个动画流程。
• 用transform实现缩放位移：通过scale()替代宽高修改实现缩放，translate()控制位置，所有变换整合在transform属性中，实现GPU加速的平滑过渡。
• 修正飞入动画：slide-in-from-left的初始状态添加旋转，避免动画结束时突然出现旋转导致的视觉跳变。

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