Why does this animation move to the bottom right? - html

Question

I have been working on this and I'm stuck as to why this animation moves my circles to the bottom right. It pulses and scales properly and at the right times I want, but the circles start in the middle and skew to the bottom right of the div.
I want them to stay centered in the middle of the Div behind the header text
#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);
}
}
Here is the 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>

Answer 1

I made a couple of alterations in your CSS to get this to work. I changed the top and left of the pulse class elements to be 0% instead of 50% and then used transform-origin on the circle class elements to center them.
#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>