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>

It shakes like crazy @DogukanCavus, at least in Opera and Chrome even if I haven't written that in my code. Maybe it doesn't happen in other browsers — Đumić Branislav, Dec 15 '18 at 19:58
"*...even if I haven't written that in my code*" - the best advice I can really give is that you should always describe your problem in your question, otherwise how are we supposed to help? — David Thomas, Dec 15 '18 at 20:09
https://stackoverflow.com/questions/34762009/pulsing-heart-css-animation — A. Meshu, Dec 15 '18 at 20:11
@DavidThomas I did exactly that, but how can I know if the problem also replicates on your browser. As I said, the heart wobbles, a tiny bit but you can see it, and it's painful to look at — Đumić Branislav, Dec 15 '18 at 20:15

score 2 · Accepted Answer · answered Dec 15 '18 at 21:16

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>

Thanks, @cjl750, for explaining why the lag happens and how to fix it, that's what i was looking for! — Đumić Branislav, Dec 15 '18 at 22:09

Element wobbles CSS

1 Answers1