CSS 动画不适用于 ::before 和 ::after答案

【问题标题】：CSS animation not applying on ::before and ::afterCSS 动画不适用于 ::before 和 ::after
【发布时间】：2021-11-23 09:10:00
【问题描述】：

我有这个来自互联网的心形动画，div 使用::before 和::after 制作了一个心形。

我已对其进行了修改，因此我可以将颜色从红色更改为粉红色。问题是我无法使用thump 动画更改::before 和::after 的颜色。我添加了另一个动画来改变::before 和::after 的颜色。虽然重击可以缩放 ::before 和 ::after 但不能改变颜色。

thum应该改变::before和::after的颜色？

.heart {
  width: 100px;
  height: 100px;
  background-color: pink;
  transform: rotate(-45deg);
  position: absolute;
  left: 100px;
  top: 100px;
  animation-name: thump;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.heart::before {
  content: "";
  background-color: pink;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  bottom: 50px;
  animation-name: change-color;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.heart::after {
  content: "";
  background-color: pink;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  left: 50px;
  animation-name: change-color;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes thump {
  0% {
    transform: scale(1.2) rotate(-45deg);
    background-color: red;
  }
  100% {
    transform: scale(1) rotate(-45deg);
    background-color: pink;
  }
}

@keyframes change-color {
  0% {
    background-color: red;
  }
  100% {
    background-color: pink;
  }
}

&lt;div class="heart"&gt;&lt;/div&gt;

【问题讨论】：

它实际上确实改变了背景，我认为您无法清楚地看到它。将背景从绿色更改为其他颜色，然后您将看到更改。
是的，它正在改变背景，但是当你删除 change-color 这个动画时它不会改变
我没有看到代码有任何问题。最好让它们改变颜色和重击分开。如果您愿意，可以尝试将重击动画添加到::before 和::after ，但这也会缩放它们。最好保留thump 和change-color 用于不同目的。
thump 正在更改 div 的颜色，但不会更改 ::before 和 ::after，我是好奇 ::before 和 ::after 由 thump 缩放但不更改颜色

标签： css css-animations

【解决方案1】：

我所做的只是摆脱了 div 和选择器中多余的背景颜色道具；在 thump 和 change-color 中交换颜色。如果这能解决您的问题。

为什么 thump 前后不改变背景颜色？

因为它不会干扰这两个，因为我们只为这些选择器使用更改颜色动画。

.heart {
  width: 100px;
  height: 100px;
  transform: rotate(-45deg);
  position: absolute;
  left: 100px;
  top: 100px;
  animation: thump 2s infinite;
}

.heart::before {
  content: "";
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  bottom: 50px;
  animation: change-color 2s infinite;
}

.heart::after {
  content: "";
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  left: 50px;
  animation: change-color 2s infinite;
}

@keyframes thump {
  0% {
    transform: scale(1.2) rotate(-45deg);
    background-color:pink ;
  }
  100% {
    transform: scale(1) rotate(-45deg);
    background-color: red;
  }
}
@keyframes change-color{
  0% {
    background-color:pink ;
  }
  100% {
    background-color: red;
  }

&lt;div class="heart"&gt;&lt;/div&gt;

【讨论】：

我觉得thump是前后缩放，但是不改变bg颜色，为什么？
@IhtishamKhan 因为 before 和 after 是 heart 类的选择器，虽然看起来是同一个目标项目，但是这两个是要设置样式的不同实体。如您所见，thump 适用于主要的 heart 类，而 changecolor 适用于 before 和 after。如果您希望 thump 能够处理所有内容，那么 thump 中使用的变换比例将使前后元素变得更大，并且会破坏心形。
所以这意味着我的技术是正确的，除了多余的 CSS。我只是在确认

【解决方案2】：

.heart {
  width: 100px;
  height: 100px;
  background-color: pink;
  transform: rotate(-45deg);
  position: absolute;
  left: 100px;
  top: 100px;
  animation-name: change-color;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.heart::before {
  content: "";
  background-color: red;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  bottom: 50px;
  animation-name: before-after;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.heart::after {
  content: "";
  background-color: red;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  left: 50px;
  animation-name: before-after;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}



@keyframes change-color {
  0% {
    background-color: red;
    transform: scale(1.2) rotate(-45deg);
  }
  100% {
    background-color: pink;
    transform: scale(1) rotate(-45deg);
  }
}
@keyframes before-after {
  0% {
    background-color: red;
  }
  100% {
    background-color: pink;
  }
}

&lt;div class="heart"&gt;&lt;/div&gt;

【讨论】：