サイズ変更時にオブジェクト中心を固定する

Question

CSSキーフレームを使用して固定した配置で拡大する円があります。問題は、円がサイズを変えるときに、円の中心が動く（左上が固定されている間）。アニメーション中にセンターが固定されていることを確認するにはどうすればよいですか？ divの "起源"を指定する方法はありますか？それは左上ではありませんか？

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

と

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

this JSFiddle

Answer 1

別のオプトインをイオン、何を行うことができますが、それが中心に保つために寸法を高めるためにtransform - scaleプロパティを使用して、transform-originです：

#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

はこれを試してください：

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