html - 为什么这个动画会移到右下角？

Question

我一直在研究这个，我不知道为什么这个动画将我的圈子移动到右下角。它在我想要的正确时间正确地脉冲和缩放，但圆圈从中间开始并偏斜到 div 的右下角。

我希望它们保持在标题文本后面的 Div 中间

@import url('https://fonts.googleapis.com/css?family=Lobster+Two');
h1 {
  font-family: 'Lobster Two', cursive;
  font-size: 5rem;
  color: #343434;
}
.container {
  position: fixed;
  z-index: 0;
  background-color: transparent;
    display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
}
.pulse {
  z-index: -1;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 30rem;
}
.pulse circle {
  fill: #ff5154;
  transform: scale(0);
  opacity: 0;
  animation: pulse 2s;
  animation-fill-mode: forwards;
  transition-timing-function: cubic-bezier(0.5, 0.5, 0, 1);
}
.pulse circle:nth-child(2) {
  fill: #7fc6a4;
  animation: pulse 2s 1.75;
  transition-timing-function: cubic-bezier(0.5, 0.5, 0, 1);
}
.pulse circle:nth-child(3) {
  fill: #e5f77d;
  animation: pulse 2s 2.00; 
  transition-timing-function: cubic-bezier(0.5, 0.5, 0, 1);
}
@keyframes pulse {
  25% {
    opacity: 0.7;
  }
  100% {
    transform: scale(1.05);
  }
}

这是HTML。

<div class="container">

    <h1>Pulse Animation</h1>

    <svg class="pulse" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <circle id="Oval" cx="512" cy="512" r="512"></circle>
        <circle id="Oval" cx="512" cy="512" r="512"></circle>
        <circle id="Oval" cx="512" cy="512" r="512"></circle>
</svg>

</div>

标签： htmlcssanimation

Answer 1

我在您的 CSS 中进行了一些更改以使其正常工作。我将脉冲类元素的顶部和左侧更改为 0% 而不是 50%，然后在圆形类元素上使用transform-origin使它们居中。

@import url('https://fonts.googleapis.com/css?family=Lobster+Two');
h1 {
  font-family: 'Lobster Two', cursive;
  font-size: 5rem;
  color: #343434;
}
.container {
  position: fixed;
  z-index: 0;
  background-color: transparent;
	display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
}
.pulse {
  z-index: -1;
  position: fixed;
  top: 0%;
  left: 0%;
  max-width: 30rem;
}
.pulse circle {
  fill: #ff5154;
  transform: scale(0);
  opacity: 0;
  animation: pulse 2s;
  animation-fill-mode: forwards;
	transform-origin: 50% 50%;
  transition-timing-function: cubic-bezier(0.5, 0.5, 0, 1);
}
.pulse circle:nth-child(2) {
  fill: #7fc6a4;
  animation: pulse 2s 1s;
  transition-timing-function: cubic-bezier(0.5, 0.5, 0, 1);
}
.pulse circle:nth-child(3) {
  fill: #e5f77d;
  animation: pulse 2s 2s; 
  transition-timing-function: cubic-bezier(0.5, 0.5, 0, 1);
}
@keyframes pulse {
  25% {
    opacity: 0.7;
  }
  100% {
    transform: scale(1.05);
  }
}

<div class="container">
  <h1>Pulse Animation</h1>
	<svg class="pulse" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	  <circle id="Oval" cx="512" cy="512" r="512"></circle>
		<circle id="Oval" cx="512" cy="512" r="512"></circle>
		<circle id="Oval" cx="512" cy="512" r="512"></circle>
	</svg>
</div>