html - 滑入、等待、滑出 CSS 动画
问题描述
尝试将 div 滑入,等待,然后再次将其滑回视野之外。
我试过的代码..
<div class="content slidein-wait-slideout-animation">content to display...</div>
.content {
background-color: #ccc;
height: 200px;
width: 100%;
}
.slidein-wait-slideout-animation {
animation: slidein 4000ms, slideout 10000ms;
}
@keyframes slidein {
0% { width: 0; opacity: 0; }
10% { width: 10%; opacity: 0; }
50% { width: 50%; opacity: 0; }
100% { width: 100%; }
}
@keyframes slideout {
0% { width: 100%; }
10% { width: 50%; opacity: 0; }
50% { width: 10%; opacity: 0; }
100% { width: 0; opacity: 0; }
}
哪个不是滑进去,等着又滑出来,此刻更像是突然显露,不走。
解决方案
你可以试试这个
$(document).ready(function() {
$('button').click(function() {
$('.content').slideUp(500).delay(5000).slideDown(500);
});
});
.content {
height: 200px;
background-color: #19c63c;
border: 1px solid #169630;
margin: 20px;
padding: 20px;
opacity: 1;
}
.hide {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Start</button>
<div class="content">content to display...</div>
推荐阅读
- r - dplyr:计算每天的账户余额
- html - 在 HTML/CSS 中覆盖浏览器默认字体 - 但不是代码字体?
- ios - 创建可重用的 UIView 子类 - 遇到大小问题
- swift - 如何快速执行一个函数 5 秒
- android - Android:运行测试用例时:无法确定任务':app:compileDebugAndroidTestJavaWithJavac'的依赖关系
- python - 如何将 self 参数传递给 python cProfile
- reactjs - 应用 find() 时获得 2 个渲染而不是 1 个渲染
- reactjs - React 构建文件不适用于共享主机
- r - r 中具有平均值和 sd 的频率表,每行有多个案例
- c# - WinForms txtTextbox_MouseEnter 触发表单上的所有文本框