Элемент колебания CSS

Question

Я создал сердце с помощью CSS и изменил его размер, уменьшился - большой каждую секунду, как обычно.Но я заметил это странное колебание, которое я действительно не положил туда, и на него очень больно смотреть.Я знаю о нескольких возможных дублирующих вопросах, но они действительно не помогли.Вот такая скрипка .

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

Анимация фактической ширины / высоты / положения имеет тенденцию работать не очень хорошо, особенно когда вы делаете несколько анимаций одновременно, как вы здесь.Перемещение / изменение размера элементов с помощью transform имеет тенденцию работать лучше.

В этом случае я бы порекомендовал установить начальный размер вашего сердца и затем использовать преобразование scale для создания эффекта импульса.При таком подходе вы также получаете дополнительное преимущество перехода от трех анимаций к одной, что облегчает работу браузера, и вам не нужно беспокоиться о синхронизации их всех.

Для того, чтобычтобы текст не сжимался вместе с сердцем, вы можете поместить обертку вокруг него и расположить текст в центре обертки поверх сердца.Тогда просто измените само сердце, а не обертку.(Или, если вы хотите, чтобы текст сокращался вместе с сердцем, сохраните ту же структуру HTML, что и сейчас.)

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>