css - 悬停动画自动淡出和淡入
问题描述
这是悬停css动画后自动淡出
我正在尝试在视频播放按钮上显示通知。按钮点击实际点击视频播放。我想用播放图标显示一个 div 的内容。但是,我想淡出播放图标,让我们说 5 seconds 。我想使用 CSS 来实现它。下面是我的尝试。如果这里有更好的解决方案,请告诉我。
这是现场演示
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>
解决方案
您只需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>
推荐阅读
- python - Pandas.Timestamp.now 中的 UnknownTimeZoneError
- python - 如何验证 Telebot 电报 api 中键入的消息值?
- reactjs - 如何对前端收到的 POST 请求进行操作?
- flutter - Flutter 登录/注销按钮实现
- python - 使用 BeautifulSoup 抓取 Javascript 注入的文本
- flutter - 我该怎么做才能拯救未来
在 Flutter 中使用 SharePreferences? - java - 带有圆括号表达式的 Spring Boot JPA 子查询
- azure - 有没有办法限制卡在 Azure DevOps 中从已解决到活动的移动?
- javascript - 在本地存储中设置对象的值
- javascript - 将索引作为键,这是一个好习惯吗?还是我应该使用 react-uuid?