我试图在一个div上创建一个动画效果，其中边框和阴影使div在悬停时看起来像3d，然后当光标离开时慢慢褪色/消失。

正如你所看到的，第一个例子（我的代码）没有边框消失过渡，而第二个例子（我想要的）有。这是一个轻微的动画，但它的存在。
如何复制边框消失动画？
到目前为止，我已经得到了动画播放时，悬停，但我不知道我会如何去动画边界消失，我假设我需要使用onmouseleave和一些过渡。
在blog-post：hover上播放的border-width上的CSS过渡
但是我不知道如何在鼠标离开上得到一个如图所示的过渡。

.blog-post {
  border-radius: 25px;
  height: fit-content;
  transition-property: border-width;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .2s;
  display: block;
}

.blog-post:hover {
  border-radius: 25px;
  border-image: none;
  border-style: none none solid solid;
  border-width: medium medium 8px 6px;
  border-color: #1D89E7;
  filter: drop-shadow(0px 2px 2px #000);
  background: #f0f6fb;
}

.blog-img {
  padding: 30px;
  border-radius: 25px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="bg-white blog-post shadow-lg rounded-lg max-w-sm mb-5">
  <a href="#">
    <img class="img-responsive blog-img" src="https://flowbite.com/docs/images/blog/image-1.jpg" alt="">
  </a>
  <div class="pl-5 pr-5 pb-3 mt-2">
    <a href="#">
      <h5 class="text-gray-900 font-bold text-2xl tracking-tight mb-2">Noteworthy technology acquisitions 2021</h5>
    </a>
    <p class="text-muted blog-date-text">June 6, 2023</p>

  </div>
</div>