React应用CSS transform定位与animation动画叠加失效问题咨询

问题根因 #

1. CSS中transform为单值属性，动画关键帧内定义的transform会直接覆盖元素本身设置的定位用transform属性，导致原有偏移失效，元素回到初始位置。
2. 你的动画代码中rotate、translateX和后续括号之间存在多余空格，属于CSS语法错误，也会导致变换属性不生效。

修复方案 #

方案1：将定位偏移合并到动画关键帧 #

把原有定位的平移参数写到动画每一帧的transform最前面即可，代码示例：

animation: flying 4s linear infinite;

@keyframes flying {
  from {
    transform: translateX(-150%) translateY(-120%) rotate(0deg) translateX(2px) rotate(0deg);
  }
  to {
    transform: translateX(-150%) translateY(-120%) rotate(360deg) translateX(2px) rotate(-360deg);
  }
}

方案2：嵌套容器隔离定位与动画（更推荐） #

给每个环绕图片套一层独立父容器，父容器负责写定位用的transform，内部图片仅写动画逻辑，两者完全不冲突，后续调整定位或动画都不需要修改另一部分逻辑，代码示例：

/* 外层容器：仅负责定位 */
.floating-img-wrapper {
  transform: translateX(-150%) translateY(-120%);
}

/* 内部图片：仅负责悬浮动画 */
.floating-img-wrapper img {
  animation: flying 4s linear infinite;
}

@keyframes flying {
  from {
    transform: rotate(0deg) translateX(2px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(2px) rotate(-360deg);
  }
}

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