Как сделать анимацию увеличения круга?

Question

[Space Around]

Есть круг сделанный html + css, при наведении он должен увеличивать, но от центра.
<div id='circle'></div>

#circle {
  width: 100px;
  height: 100px;
  background: red;
  left: 200px;
  top: 200px;
  transition: width .7s, height .7s;
  border-radius: 50%;
}

#circle:hover {
  height: 300px;
  width: 300px;
}

При таком коде центр смещается, а должен быть фиксированным, как это можно реализовать без svg

Answer 1

[Stalker_RED]

Еще лучше менять размер через transform указав центр при помощи transform-origin

Comments

[ReActor Дмитрий Вершанский]

И какой простите смысл в прописывании значения свойства transform-origin со значением center, которое идет по дефолту? Лишние несколько десятков бит информации файлу нарастить?

[Stalker_RED]

Дмитрий, вообще да, по дефолту центр. но вообще transform-origin слишком полезная штука, чтобы о ней не упомянуть.

[ReActor Дмитрий Вершанский]

Stalker_RED, Что ж - это ответ)

Answer 2

[ReActor Дмитрий Вершанский]

#circle:hover {
transform: scale(1.3);
}