Onhover псевдо-класс желе анимация с использованием CSS

Question

Я хочу добавить анимацию типа желе. Я пытался использовать ключевые кадры из animate.css, но не достиг результата.Я хочу анимацию до и после при наведении.Может ли кто-нибудь помочь мне за вдохновение https://codepen.io/alcoven/pen/raGKZy, как это я пытался добавить в свой код с помощью CSS.Является ли это возможным?Прямо сейчас я добавил только переход.

.card {
    height: 100px;
    background-color: tomato;
}
.section {
  top: 50px;
  position: relative;
  overflow: hidden;
  padding: 50px 0 0;
}

.inner {
  position: relative;
  background: black;
  height: 120px;
}
.inner:after {
  box-shadow: 0 0 0 80px #000;
  border-radius: 100%;
  position: absolute;
  height: 150px; 
  content: '';
  right: -20%;
  left: -20%;
  top: -150px;
	transition: all 0.4s ease-in-out;
}

.inner:hover:after {
	top: -120px;
}

.inner:before {
    box-shadow: 0 0 0 80px #000;
  border-radius: 100%;
  position: absolute;
  height: 150px; 
  content: '';
  right: -20%;
  left: -20%;
  top: 130px;
	transition: all 0.4s ease-in-out;
}

.inner:hover:before {
	top: 50px;
}

<div class='card'>
  <div class="section">
    <div class="inner"></div>
  </div>
</div>