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

I have this heart animation from internet, div uses ::before and ::after to make a heart shape.

I have modified it so I can change the color from red to pink. The issue is that I can't change the color of ::before and ::after using the thump animation. I have added another animation to change color of ::before and ::after. While the thump can scale ::before and ::after but not change the color.

thum is supposed to change the color of ::before and ::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>

CodePudding user response：

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

CodePudding user response：

All I did was to get rid off of the redundant background colors props from the div and the selectors; swap the colors in thump & change-color. If that solves your question.

Why thump not changing bg color for before and after?

Because it does not interfere with those two as we are only using change-color animation for those selectors.

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