CSS thump动画无法修改::before、::after伪元素背景色问题

AI 小北

2026-10-1

问题结论

thump动画本身不支持直接修改::before、::after伪元素的颜色，原因如下：

你将thump动画仅绑定在了.heart父元素上，CSS动画默认只会作用于绑定该动画的元素本身，伪元素属于独立的渲染节点，不会自动继承父元素的动画规则。
你误以为thump可以控制伪元素的缩放，本质是父元素的transform属性会默认作用于所有内部包含的节点（包括伪元素），属于父元素变形带动的连带效果，并非动画直接作用到了伪元素上。而background-color不属于会被子元素/伪元素自动继承的属性，且你单独给伪元素设置了固定的粉色背景，因此父元素的背景色变化不会传递到伪元素上。

优化方案

你不需要额外单独写change-color动画，有两种更简洁的实现方式：

直接给两个伪元素也绑定thump动画，同时删掉伪元素的change-color动画绑定即可，同一个动画可以同时绑定给多个元素。
用CSS变量简化代码，只需要给父元素绑一个动画即可，示例如下：

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

.heart::before,
.heart::after {
  content: "";
  background-color: var(--heart-color);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
}
.heart::before {
  bottom: 50px;
}
.heart::after {
  left: 50px;
}

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