悬停动画时自动淡出和淡入

Question

这是在悬停css动画后自动淡出的功能

我正在尝试在视频播放按钮上显示通知。实际上，单击按钮单击即可播放视频。我知道要显示一个带有播放图标内容的div。但是，我想淡出播放图标，可以说5秒后。我想使用CSS实现它。以下是我的尝试。如果有更好的解决方案，请在此通知我。

这里是现场直播Demo

body {
  font-size: 50%;
  font-style: Arial;
}

.animation-box {
  width: 75%;
  height: 27.5rem;
  background-color: blue;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.animation-container {
  width: 1000rem;
  height: 30rem;
}

.first-text {
  font-size: 4rem;
  position: absolute;
  left: 2.5rem;
  top: 5rem;
  color: white;
    -webkit-animation: fadeOut 2s forwards;
    animation: fadeOut 2s forwards;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

.first-text:hover {
    -webkit-animation: fadeIn 0s forwards;
    animation: fadeIn 0s forwards;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@-webkit-keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}

<section class="animation-box">
    <h1 class="first-text">This is auto fade out after hover </h1>
  </section>

Answer 1

您仅需transition即可实现：

body {
  font-size: 50%;
  font-style: Arial;
}

.animation-box {
  width: 75%;
  height: 27.5rem;
  background-color: blue;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
h1{
  opacity:0;
  transition: opacity 250ms 5s ease;
}

.animation-box:hover h1{
  opacity:1;
  transition-delay: 250ms;
}

<section class="animation-box">
    <h1 class="first-text">This is auto fade ou1t after hover </h1>
  </section>