排除子元素受 CSS 动画的影响

Question

我有以下标记：

<div class="container">
  <div class="content">
    ...
    <div class="no-animate">
      ...
    </div>
  </div>
</div>

所以我想将 CSS 动画应用到.container，但排除.no-animate它的内部。请注意，.no-animate具有position: fixed属性，这就是为什么我想排除它。

我已经尝试过以下方法：

@keyframes my-animation {
    12.5% {
        transform: translateX(-0.5rem);
    }
    37.5% {
        transform: translateX(0.5rem);
    }
    62.5% {
        transform: translateX(-0.2rem);
    }
    87.5% {
        transform: translateX(0.2rem);
    }
}
.container {
    animation: my-animation 0.5s;
    animation-timing-function: linear;
}
.container .no-animate {
    animation: none;
}

不幸的是，这似乎没有任何效果，并且.no-animate由于动画而移动。任何帮助是极大的赞赏。

Answer 1

您不能从动画中排除子元素。相反，您可以将该子元素放置在父块之外，但是您可以应用该position: absolute;属性来创建一个视图，其中背景（父元素）是动画的，但子元素保持静止。只有解决方法可以做到这一点。其中之一是我上面提到的。

这个答案还有另一个类似的解决方法