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

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>

Answer 2

使用 transition:0.5s ease with opacity:0

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

.animation-box{
transition: 0.5s ease;
}
.animation-box:hover{
opacity:0;
transition: 0.5s ease;
}

Answer 3

.Class {
    transition: all 0.5s;
color: #ff0;
margin: 50px;
font-size: 28px;
cursor: pointer;
}

.Class:hover {
    color: #00f;
}

<p class="Class"> This is me </p>

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

Auto fade out and fade In on hover animation

css

animation

fadeout

fadein

css-animations

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

这里是直播Demo