Erweitern Sie absolut positionierten Kreis von der Mitte

Question

Ich habe absolute div, die einen Kreis durch Runderrahmen darstellt. Ich muss diesen Kreis erweitern, wenn Hover-Ereignis für das Div auftritt, das Problem ist, dass der Kreis nach rechts/unten erweitert und ich brauche es von der Mitte zu erweitern. Dies liegt natürlich daran, dass die oberen/linken Parameter feste Werte haben, was ich mit einem negativen oberen/linken Rand überwinden konnte. Das letzte Problem ist, dass ich einen weichen Übergang vom Normalzustand zum Expandieren hinzufügen möchte, und dies führt zu schlechten Ergebnissen. HTML-Code:

<div class="circle"></div> 

CSS-Code:

.circle { 

    position: absolute; 
    left: 150px; 
    top: 150px; 
    border: 5px solid #000; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
    width: 40px; 
    height: 40px; 
    margin-left: -20px; 
    margin-top: -20px; 
    -webkit-transition: width 0.5s, height 0.5s; 
    -moz-transition: width 0.5s, height 0.5s; 
    -o-transition: width 0.5s, height 0.5s; 
    transition: width 0.5s, height 0.5s; 
} 
.circle:hover 
{ 
    width: 60px; 
    height: 60px; 
    margin-left: -30px; 
    margin-top: -30px; 
} 

Arbeitsbeispiel: https://jsfiddle.net/ArturoO/4qLr0tc2/5/

Wenn Sie die Übergangsregeln entfernen, dann wird es funktionieren, aber ich brauche die Animation zu kommen. Irgendwelche Ideen ?

Answer 1

Verwenden Sie eine Übersetzung

.circle { 
 
    position: absolute; 
 
    left: 150px; 
 
    top: 150px; 
 
    border: 5px solid #000; 
 
    border-radius: 50%; 
 
    width: 40px; 
 
    height: 40px; 
 
    transform: translate(-50%, -50%); 
 
    transition: width 0.5s, height 0.5s; 
 
} 
 
.circle:hover { 
 
    width: 60px; 
 
    height: 60px; 
 
}

<div class="circle"></div>