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

Question

我有这个来自互联网的心形动画，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;
  }
}

<div class="heart"></div>

Answer 1

.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;
  }
}

<div class="heart"></div>

Answer 2

我所做的就是摆脱 div 和选择器中多余的背景颜色道具；在重击和变色中交换颜色。如果这解决了你的问题。

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

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

.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;
  }

<div class="heart"></div>

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

CSS animation not applying on ::before and ::after

css

css-animations

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