Behalten Sie das Objekt in der Mitte, während sich die Größe ändert

Question

Ich habe einen Kreis, der mit CSS-Keyframes mit fester Positionierung erweitert wird. Das Problem besteht darin, dass sich der Mittelpunkt des Kreises bewegt, während der Kreis sich ändert (während die obere linke Ecke fest bleibt). Wie stelle ich sicher, dass das Center während der Animation fixiert ist? Gibt es eine Möglichkeit, den "Ursprung" des Divs anzugeben, so dass es nicht oben links ist?

<div id="circle"></div> 

und

#circle { 
    position: fixed; 
    background: #07F; 
    border-radius: 50%; 
    animation: expand linear 3s infinite; 
    top: 10px; 
    left: 10px; 
} 

@keyframes expand { 
    0% { 
    width: 100px; 
    height: 100px; 
    } 
    100% { 
    width: 500px; 
    height: 500px; 
    } 
} 

Siehe this JSFiddle

Answer 1

Eine weitere opt Ion, das tun, was Sie können transform - scale Eigenschaft verwenden Dimensionen zu erhöhen und transform-origin dann zentriert zu halten:

#circle { 
 
    position: fixed; 
 
    background: #07F; 
 
    border-radius: 50%; 
 
    animation: expand linear 3s infinite alternate; 
 
    top: 10px; 
 
    left: 10px; 
 
    transform-origin: center; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
@keyframes expand { 
 
    0% { 
 
    transform: scale(1); 
 
    } 
 
    100% { 
 
    transform: scale(5); 
 
    } 
 
}

<div id="circle"></div>

Answer 2

try this:

#circle { 
 
    position: fixed; 
 
    background: #07F; 
 
    border-radius: 50%; 
 
    animation: expand linear 3s infinite alternate; 
 
    top: calc(10px + 50px); /* 10px + (half of the initial height) */ 
 
    left: calc(10px + 50px); /* 10px + (half of the initial width) */ 
 
    transform: translate(-50%, -50%) 
 
} 
 

 
@keyframes expand { 
 
    0% { 
 
    width: 100px; 
 
    height: 100px; 
 
    } 
 
    100% { 
 
    width: 500px; 
 
    height: 500px; 
 
    } 
 
}

<div id="circle"></div>