Как сверстать подобную анимацию?

Question

[yura_89]

Здравствуйте!
Подскажите пожалуйста, как можно решить определенную проблему ...
ссылка на код: https://jsfiddle.net/32o77ewu/

Тут есть два совершенно одинаковых по стилям блока. Их отличает только высота. Если вы наведете на них, то увидите анимацию - с центра плавно блок покрывается зеленым фоном с использованием border-radius:50%.

Все это прописано в css. В большом блоке (т.е. чья высота 140px) работает как надо, а при малой высоте (в первом блоке) эта анимация получается какбы "сплющенной".

Можно ли это как-то исправить, чтобы и в маленьком блоке анимация происходила с центра с радиусом окружности 50% ?

спасибо!

Answer 1

[Кирилл]

Ну сплющенной анимация получается, потому-что у анимируемого блока разные ширина и высота.
Как вы представляете круглую анимацию у прямоугольного блока? =)
Решение проблемы - для этого зеленого блока сделать равными ширину и высоту.
Либо сделать две разных анимации для увеличения ширины и увеличения высоты с разным временем анимации.

Answer 2

[profesor08]

Вот так.

.s-button .bg {
  transition:opacity 0.2s ease 0s, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0s;
  border-radius:50%;
  width: 10em;
  height: 10em;
  z-index:0;
  content:"";
  margin:auto;
  transform:scale(0);
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:#94c766;
  }