What is wrong with my CSS animation?

HTML-CSS
1

I’m trying to make the CSS heart beat. I intentionally kept the colours different at the initial stage, so that it’s clear to me where the after and before elements are going. But I want the heart to scale. What am I doing wrong?

/* formation of heart */
.heart {
  position: absolute;
  top: 50vh;
  left: 50vw;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  border-radius: 0px 0px 0px 2px;
  background-color: #ff6f00; /*dark orange*/
  transform: rotate(-45deg);
  /*transition: all ease 200ms;*/
  animation-name: beat;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.heart::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50px;
  background-color: #ff8f00; /*mid orange*/
  height: 100px;
  width: 100px;
  border-radius: 50%;
  animation-name: after-beat;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  /*transition: all ease 200ms;*/
}

.heart::before {
  content: "";
  position: absolute;
  bottom: 50px;
  left: 0;
  background-color: #ffac02; /*yellow orange*/
  height: 100px;
  width: 100px;
  border-radius: 50%;
  animation-name: before-beat;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  /*transition: all ease 200ms;*/
}

/*Beating animation*/
@keyframes beat {
  0% {
    transform: scale(1) rotate(-45deg);
  }
  50% {
    transform:  scale(0.7) rotate(-45deg);
  }
}

@keyframes before-beat{
  50% {
    background-color: #ff6f00;
  }
}

@keyframes after-beat {
  50% {
    background-color: #ff6f00;
  }
}
2

In my browser it scales and beats and changes colors, everything :slight_smile:

3

I see it does work elsewhere. It wasn’t working in Codepen for some reason.