记录一个transition的使用

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #c8d6e5;
}

.main {
  position: relative;
  width: 800px;
}

.card {
  width: 335px;
  height: 580px;
  position: relative;
}

.img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.5s;
  clip-path: circle(70.7% at 50% 50%);
}

img {
  width: 100%;
}

.card:hover .img {
  clip-path: circle(13.9% at 50% 35%);
}

.content {
  position: absolute;
  left: 0;
  bottom: 100px;
  text-align: center;
}

h2 {
  padding: 0;
  margin: 0;
  text-transform: uppercase;
}

h2,
p {
  transform: translateY(20px);
  transition: 0.3s;
  opacity: 0;
}

.card:hover h2,
.card:hover p {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

    <div class="card">
      <div class="img">
        <img src="./img/2.jpg" alt="" />
      </div>
      <div class="content">
        <h2>title</h2>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique
          dolorum optio nihil soluta dignissimos dicta esse enim rem magnam
        </p>
      </div>
    </div>

这里为什么将transition-delay卸载.card:hover 后h2与p中，而不是直接写在h2和p中？

如果直接写在h2和p中，那么h2和p的出现和消失都会有延迟，但如果写在.card:hover 后的h2与p中，只有h2和p的出现会有延迟，因为h2和p消失的时候.card已经不是cover了，transition-delay不会生效了。