css - 悬停时的 CSS 动画 - 完成后暂停
问题描述
我在图像上有一个 div,我想用 css 动画将他的位置从图像的顶部更改为底部(通过悬停触发),并在动画后以他的新值保持在底部(我尝试不要使用 jQuery)。
所以现在我在它悬停时运行动画,当它不是时它暂停。并且使用动画填充模式:转发它可以工作,唯一的事情是我必须保持悬停以完成动画。我的代码:
<div class="home-posts-section">
<div class="home-posts-top-content">
<img src="images/worldmap.jpg" >
<div class="uael-post__content-wrap">
<h1>some content</h1>
<p>some more content</p>
</div>
</div>
</div>
.home-posts-top-content{
width:400px;
height:400px;
position:relative;
z-index:1;
}
.home-posts-top-content img{
width:100%;
height:100%;
}
.uael-post__content-wrap{
width:90%;
margin:0 auto;
;
background-color: rgba(255,255,255,0.9);
position:absolute;
top:25px;
}
.home-posts-section .home-posts-top-content .uael-post__content-wrap{
-webkit-animation: scroll_to_bottom 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: scroll_to_bottom 2s; /* Firefox < 16 */
-ms-animation: scroll_to_bottom 2s; /* Internet Explorer */
-o-animation: scroll_to_bottom 2s; /* Opera < 12.1 */
animation: scroll_to_bottom 2s;
-webkit-animation-play-state:paused;
-webkit-animation-fill-mode: forwards;
}
.home-posts-section .home-posts-top-content .uael-post__content-wrap:hover{
-webkit-animation-play-state:running;
}
@keyframes scroll_to_top {
from { top: 258px; }
to { top: 25px; }
}
/* Firefox < 16 */
@-moz-keyframes scroll_to_top {
from { top: 258px; }
to { top: 25px; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes scroll_to_top {
from { top: 258px; }
to { top: 25px; }
}
我正在尝试找到一种方式,让 div 在悬停时改变他的位置并保持在那里。谢谢
解决方案
您可以使用houve
css 像这个示例一样更新 div 的位置
.uael-post__content-wrap:hover{
//do what ever you want
}
推荐阅读
- python - 必须多次输入负数才能跳出循环
- boto3 - boto3 中的 cloudwatch 警报给出了单位错误
- three.js - threejs:如何使用自定义着色器渲染纹理,包括纹理 UV 偏移
- html - Bootstrap - 内联表单无法正确显示
- flutter - 点击联系人姓名并带您到特定页面
- html - 内的交互式内容?
- javascript - 使用 JavaScript,我可以将图像保存为其 CSS 缩略图大小吗?
- mysql - MYSQL 设置连接表的临时列
- c++ - Ora-00257 和 occi
- android - 未调用 Android 的 RecyclerView 适配器方法