使用CSS

Question

我想添加我尝试使用来自animate.css的关键帧的果冻型动画，但是没有达到结果。我希望动画在悬停之前。任何人都可以像我尝试使用CSS在代码中添加的灵感一样https://codepen.io/alcoven/pen/raGKZy来帮助我。可能吗？现在，我只添加了过渡。

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