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

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>