如何同时应用常规transform与关键帧动画中的transform？

你的问题出在CSS transform属性的覆盖机制：transform是复合属性，元素静态样式里的transform会被动画关键帧中定义的transform完全覆盖，所以你设置的scale缩放效果被动画里的rotate旋转冲掉了，最终只有旋转生效，缩放没起作用。

下面给你两种可行的解决思路：

方法一：用CSS变量复用缩放值，在关键帧中同时包含缩放与旋转 #

给每个元素定义专属的缩放变量，然后在动画关键帧里把缩放和旋转组合起来，既能复用动画逻辑，又能保留每个元素的独立缩放值：

@keyframes wave {
  0% {
    transform: var(--scale) rotate(0deg);
  }
  25% {
    transform: var(--scale) rotate(1deg);
  }
  50% {
    transform: var(--scale) rotate(0deg);
  }
  75% {
    transform: var(--scale) rotate(-1deg);
  }
  100% {
    transform: var(--scale) rotate(0deg);
  }
}

#tree1 {
    position: absolute;
    bottom: 0;
    left: 0;
    --scale: scale(0.7); /* 定义缩放变量 */
    animation: wave 3s infinite linear;
}

#tree2 {
    position: absolute;
    bottom: 0;
    left: 100px;
    z-index: 1;
    --scale: scale(1.2); /* 定义缩放变量 */
    animation: wave 3s infinite linear;
    animation-delay: 1s;
}

这种方法不需要改动HTML结构，代码简洁且易于维护。

方法二：用容器分离缩放与旋转动画 #

给每个元素套一个容器，容器负责设置缩放效果，内部元素单独应用旋转动画，通过分层避免transform属性冲突：

HTML结构调整： #

<div class="tree-wrapper tree1">
  <div id="tree1"></div>
</div>
<div class="tree-wrapper tree2">
  <div id="tree2"></div>
</div>

对应CSS： #

@keyframes wave {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(1deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.tree-wrapper {
    position: absolute;
    bottom: 0;
}

.tree1 {
    left: 0;
    transform: scale(0.7); /* 容器设置缩放 */
}

.tree2 {
    left: 100px;
    z-index: 1;
    transform: scale(1.2); /* 容器设置缩放 */
}

#tree1, #tree2 {
    animation: wave 3s infinite linear; /* 内部元素应用旋转动画 */
}

#tree2 {
    animation-delay: 1s;
}

这种方法兼容性更好，适合需要兼容不支持CSS变量的旧浏览器场景。

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