css卡片翻转动画翻转，然后内容闪烁为可见

<div class="card-container">
  <!-- 卡片内容 -->
</div>

.card-container {
  width: 200px;
  height: 200px;
  background-color: #f1f1f1;
  perspective: 1000px; /* 设置透视视角，增强3D效果 */
}

.card-container:hover .card {
  transform: rotateY(180deg); /* 鼠标悬停时翻转180度 */
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s; /* 设置过渡时间，使翻转效果更平滑 */
}

.card-front,
.card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden; /* 隐藏背面，避免翻转时显示 */
}

.card-front {
  transform: rotateY(0deg);
}

.card-back {
  transform: rotateY(180deg);
}

<div class="card-container">
  <div class="card">
    <div class="card-front">
      <!-- 正面内容 -->
    </div>
    <div class="card-back">
      <!-- 背面内容 -->
    </div>
  </div>
</div>

@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.card-container:hover .card-back {
  animation: blink 1s infinite; /* 鼠标悬停时背面内容闪烁 */
}