CSS代码：

/* 用于 blur 进入动画的关键帧 */
@keyframes blur-in-animation {
  0% {
    opacity: 0;
    filter: blur(10px); /* 开始时模糊度为 10px */
  }
  100% {
    opacity: 1;
    filter: blur(0px); /* 结束时模糊度为 0px */
  }
}

/* 用于淡出动画的关键帧 */
@keyframes fade-out-animation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0; /* 完全透明 */
  }
}

/* 将 blur 进入和淡出动画组合到一起 */
.blur-in-fade-out-animation {
  animation-name: blur-in-animation, fade-out-animation;
  animation-duration: 1s, 1s; /* 进入和淡出动画的持续时间 */
  animation-timing-function: ease, ease; /* 进入和淡出动画的缓动函数 */
  animation-delay: 0s, 2s; /* 进入和淡出动画的延迟时间 */
  animation-iteration-count: 1, 1; /* 进入和淡出动画的重复次数 */
  animation-fill-mode: forwards, forwards; /* 进入和淡出动画完成后保持在结束状态 */
}

HTML代码：

这是一个使用模糊和淡出效果的文本。