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

Question

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

假设我有一个 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 之前或之后添加 content: 'loading...'。

是否可以确保伪元素不从.spinner 继承动画，或者伪元素必须始终获取父元素的动画？

Answer 1

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

让孩子看起来好像没有动画的唯一方法是反转效果，如下面的 sn-p 所示。所做的是将相同的动画添加到伪元素中，但将animation-direction 设置为reverse。这意味着伪得到精确的反向变换效果，因此会将其保留在相同的位置。

.spinner {
  height: 50px;
  width: 50px;
  position: relative;
  animation: rotation .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%;
}
.spinner:after {
  position: absolute;
  content: 'Loading..';
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  animation: rotation .6s infinite linear reverse; /* added this line */
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

<div class='spinner'></div>

---

上面的 sn-p 使用 transform-origin 的默认设置 50% 50% 但如果子伪元素有 padding 和/或 margin 那么 transform-origin 设置必须相应地调整为避免伪元素产生类似颤抖的效果。计算逻辑在下面的sn-p中提供。

.spinner {
  height: 50px;
  width: 50px;
  position: relative;
  animation: rotation .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%;
}
.spinner.parent-padded-margin {
  padding: 10px;
  margin: 10px;
}
.spinner:after {
  position: absolute;
  content: 'Loading..';
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  animation: rotation .6s infinite linear reverse;
  /* added this line */
}
.spinner.child-padded-margin:after {
  padding: 10px 8px;
  margin: 5px 4px;
  transform-origin: calc(50% - 12px) calc(50% - 15px);  /* calc(50% - ((padding-left + padding-right)/2 + margin-left)) calc(50% - ((padding-top + padding-bottom)/2 + margin-top)) */
}
.spinner.child-padded-margin-2:after {
  padding: 10px 6px 16px 14px;
  margin: 7px 12px 5px 10px;
  transform-origin: calc(50% - 20px) calc(50% - 20px);  /* calc(50% - ((padding-left + padding-right)/2 + margin-left)) calc(50% - ((padding-top + padding-bottom)/2 + margin-top)) */
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

<div class='spinner'></div>
<div class='spinner parent-padded-margin'></div>
<div class='spinner child-padded-margin'></div>
<div class='spinner child-padded-margin-2'></div>

定位伪元素（使用top,left,bottom,right）也会影响动画。它还需要相应地修改transform-origin，以使动画正常工作。下面的 sn-p 中有一个示例。

.spinner {
  height: 50px;
  width: 50px;
  position: relative;
  animation: rotation .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%;
}
.spinner.parent-padded-margin {
  padding: 10px;
  margin: 10px;
}
.spinner:after {
  position: absolute;
  content: 'Loading..';
  height: 100%;
  width: 100%;
  animation: rotation .6s infinite linear reverse;  /* added this line */
}
.spinner.child-positioned{
    margin-bottom: 40px;
  }
.spinner.child-positioned:after {
  top: 120%;
  left: 2%;
  transform-origin: calc(50% - 2%) calc(50% - 120%); /* basically need to subtract the distance from the left and top of the container */
}
.spinner.child-positioned-negative:after {
  bottom: -120%;
  right: -2%;
  transform-origin: calc(50% - 2%) calc(50% - 120%); /* basically need to subtract the distance from the left and top of the container */
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

<div class='spinner child-positioned'></div>
<div class='spinner child-positioned-negative'></div>

注意：上述两种解决方案在最新版本的 Chrome、Opera 和 Safari 中都可以正常工作，但会导致文本在 IE 11、Edge 和 Firefox 中出现倾斜。 Firefox 似乎需要一个单独的动画，从 FF 的旋转（-10deg）到旋转（-370deg），而它在 IE 中变得更加复杂。

---

没有在伪（子）元素上设置反向动画的唯一替代方法是使用 Chris 在他的评论中提到的 方法。这意味着将边框和动画直接设置为伪元素。这意味着父级的内容不会受到影响，因为父级不会受到子级转换的影响。

.spinner {
  height: 50px;
  width: 50px;
  position: relative;
}
.spinner:after {
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  animation: rotation .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);
  }
}

<div class='spinner'>Loading...</div>

Answer 2

为了问题的完整性以及@Harry 的全面答案，我制作了一个版本，其中包含微调器下方的文本。这样做的方法是将.spinner作为画布，将实际旋转的圆圈:before和loading...放在:after中如下：

.spinner:before {
    content: ' ';
    display: block;
    height: 50px;
    width: 50px;
    margin: 24px auto 6px auto;
    animation: rotation .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%;
}
.spinner {
  height: 100px;
  width: 100px;
  position: relative;
}
.spinner:after {
  display: block;
  text-align: center;
  content: 'loading...';
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

<div class='spinner'></div>