Element wobbles CSS

Question

I've made a heart with CSS and made it resize, go small - big every second, like normally. But I noticed this strange wobble, that I didn't really put there and is really painful to look at. I aware of few possible duplicate questions, but they didn't really help. Here's a fiddle.

html,
body,
.container {
  height: 100%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.heart {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
  transform: rotate(-45deg);
  transform-style: preserve-3d;
  animation: growMain 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.heart:after,
.heart:before {
  background-color: red;
  content: "";
  border-radius: 50%;
  position: absolute;
  transform: translateZ(-1px);
}

.heart:after {
  animation: growAfter 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.heart:before {
  animation: growBefore 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes growMain {
  from {
    width: 50px;
    height: 50px;
  }
  to {
    width: 80px;
    height: 80px;
  }
}

@keyframes growAfter {
  from {
    left: 25px;
    width: 50px;
    height: 50px;
  }
  to {
    left: 40px;
    width: 80px;
    height: 80px;
  }
}

@keyframes growBefore {
  from {
    top: -25px;
    width: 50px;
    height: 50px;
  }
  to {
    top: -40px;
    width: 80px;
    height: 80px;
  }
}

.inner {
  display: initial;
  transform: rotate(45deg);
}

.text {
  text-align: center;
  color: white;
  font-family: "Comic Sans MS";
  font-size: 100%;
  margin: 0;
}

<div class="container">
  <div class="heart">
    <div class="inner">
      <p class="text">Some text</p>
    </div>
  </div>
</div>

Answer 1

Animating actual width/height/position tends to not perform super well, especially when doing multiple animations at once like you are here. Moving/resizing elements with transform tends to perform better.

In this case, I would recommend setting the initial size of your heart and then using a scale transformation to make the pulse effect. With this approach, you also get the added benefit of going from three animations to one, which is easier for the browser to handle, and you don't have to worry about syncing them all up.

In order to make the text not shrink along with the heart, you can put a wrapper around it, and absolutely position the text in the center of the wrapper, on top of the heart. Then just transform the heart itself, not the wrapper. (Or if you want the text to shrink along with the heart, keep the same HTML structure you have now.)

html,
body,
.container {
  height: 100%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.heart-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
}

.heart {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: red;
  transform: rotate(-45deg) scale(1);
  transform-style: preserve-3d;
  animation: pulse 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.heart::before {
  left: 40px;
}
.heart::after {
  top: -40px;
}
.heart::after,
.heart::before {
  background-color: red;
  content: "";
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  transform: translateZ(-1px);
}

@keyframes pulse {
  from {
    transform: rotate(-45deg) scale(1);
  }
  to {
    transform: rotate(-45deg) scale(0.6);
  }
}

.text {
  position: absolute;
  top: 40%; /* slightly off-center to the top, so it appears centered when the heart shrinks */
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  font-family: "Comic Sans MS";
  font-size: 100%;
  margin: 0;
}

<div class="container">
  <div class="heart-wrapper">
    <div class="heart"></div>
    <div class="text">some text</div>
  </div>
</div>