Question

我对CSS非常满意，并调整大小，然后变小-像通常一样每秒变大。但是我注意到了这种奇怪的摆动，因为我并没有真正放在那里，而且看起来真的很痛苦。我知道很少有重复的问题，但是它们并没有真正的帮助。这是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

对实际的宽度/高度/位置进行动画处理往往效果不佳，尤其是像您在此处同时进行多个动画处理时。使用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>

元素摆动CSS

1 个答案: