使用CSS的Onhover伪类果冻动画

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>