如何对此文本应用淡入淡出效果？

.fade-in-out {
  opacity: 0; /* 初始状态为透明 */
  transition: opacity 0.5s ease-in-out; /* 过渡效果，持续时间为0.5秒，缓动函数为ease-in-out */
}

.fade-in-out:hover {
  opacity: 1; /* 鼠标悬停时变为不透明 */
}

<div class="fade-in-out">
  这是要应用淡入淡出效果的文本。
</div>

@keyframes fade {
  0% { opacity: 0; } /* 初始状态为透明 */
  100% { opacity: 1; } /* 结束状态为不透明 */
}

.fade-in-out {
  animation: fade 0.5s ease-in-out; /* 动画属性，持续时间为0.5秒，缓动函数为ease-in-out */
}

.fade-in-out:hover {
  opacity: 1; /* 鼠标悬停时变为不透明 */
}

<div class="fade-in-out">
  这是要应用淡入淡出效果的文本。
</div>