中心から絶対配置された円を展開します

Question

丸い枠線を通る円を表す絶対位置指定divを持っています。この円を展開する必要があるのは、divのホバーイベントが発生したときに、円が右/下方向に展開され、中心から展開する必要があるという問題です。このコースは、上/左パラメータに固定値があるために発生します。これは、上/左のマージンを負にしてこれを克服することができました。最後の問題は、通常状態から拡張状態へのスムーズな移行を追加したいということです。これは悪い結果をもたらします。 HTMLコード：

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

CSSコード：

.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; 
} 

の作業例：https://jsfiddle.net/ArturoO/4qLr0tc2/5/

あなたは遷移規則を削除した場合、それは動作しますが、私は発生するアニメーションを必要としています。何か案は ？ https://jsfiddle.net：

Answer 1

はそうのような変換の代わりに、余白

.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>