在从父元素继承的伪元素上禁用CSS动画

标题几乎说明了一切，但这里有一个例子

假设我有一个CSS“加载微调器”，如下所示：

.spinner {
    height: 50px;
    width: 50px;
    position: relative;
    animation: rotate .6s infinite linear;
    border-left: 6px solid #222;
    border-right: 6px solid #222;
    border-bottom: 6px solid #222;;
    border-top: 6px solid #ccc;
    border-radius: 100%; 
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

我想在此添加一个伪元素—例如，使用

内容：“加载…”

在

.spinner

之前或之后

---

是否可以确保伪元素不会从

.spinner

继承动画，或者伪元素必须始终采用父元素所具有的内容

由于伪元素是父元素的子元素，只要父元素有动画，它就会继续旋转。即使在伪元素上设置

animation:none

，也没有效果

让孩子看起来好像没有动画的唯一方法是反转效果，如下面的片段所示。所做的是将相同的动画添加到伪元素中，但

动画方向

设置为

反向

。这意味着伪函数将获得精确的反向变换效果，从而将其保留在相同的位置

.spinner{
高度：50px；
宽度：50px；
位置：相对位置；
动画：旋转。6s无限线性；
左边框：6px实心#222；
右边框：6px实心#222；
边框底部：6px实心#222；
边框顶部：6px实心#ccc；
边界半径：100%；
}
斯宾纳先生：之后{
位置：绝对位置；
内容：“加载…”；
顶部：0px；
左：0px；
身高：100%；
宽度：100%；
动画：旋转。6s无限线性反转；/*添加了这一行*/
}
@关键帧旋转{
从{
变换：旋转（0度）；
}
到{
变换：旋转（359度）；
}
}

---

为了确保问题的完整性以及@Harry I的综合答案，我制作了一个版本，在微调器下方有文本。其方法是使用

.spinner

作为画布，将实际的旋转圆

：放在
之前，将
加载…
放在
：之后，如下所示：


.spinner:之前{
内容：''；
显示：块；
高度：50px；
宽度：50px；
保证金：24px自动6px自动；
动画：旋转。6s无限线性；
左边框：6px实心#222；
右边框：6px实心#222；
边框底部：6px实心#222；；
边框顶部：6px实心#ccc；
边界半径：100%；
}
斯宾纳先生{
高度：100px；
宽度：100px；
位置：相对位置；
}
斯宾纳先生：之后{
显示：块；
文本对齐：居中；
内容：“加载…”；
}
@关键帧旋转{
从{
变换：旋转（0度）；
}
到{
变换：旋转（359度）；
}
}
伪元素是子元素，因此当旋转父元素时，子元素将自动旋转。我能想到的唯一解决方案是应用反向转换。你可以使用微调器作为psuedo元素，文本作为主元素。看看这个@Chris；我不确定您是否打算添加解决方案作为答案，因此我在回答中提到了这一点，并添加了一个片段。如果您希望添加一个单独的答案，请告诉我，我会删除该部分。别担心@Harry，我的答案更像是一个建议。虽然这个解决方案从技术上回答了我的问题，但它不是一个理想的解决方案，因为：after（包括使用边距和填充）上的任何偏离给定位置的情况结果是伪元素（在本例中为文本）沿微调器方向移动，尽管保持水平外观。@Rob是的，这不是理想的解决方案，但没有其他解决方案（除非您希望采纳Chris的建议）。而且，如果你能给我看定位文本，我可以帮你把它调整到这个代码中。@Harry，你好。你能演示如何在圆圈内（中间）做文字吗？“好的”消息它对我不起作用。但是，我只是添加了与父级相同的动画，但将动画时间设置为5ms，动画根本不可见，看起来很好。出于某种原因，我只是假设您希望文本在圆圈内：D