css - 如何在 2 秒后在页面中间添加包含滚动的动画
问题描述
如何添加在页面加载时开始的动画。将滚动条放在页面中间
我的代码CSS:
@-webkit-keyframes fadeDown {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
-ms-transform: translateY(0px);
}
100% {
-webkit-transform: translateY(500px);
transform: translateY(500px);
-ms-transform: translateY(500px);
}
}
@keyframes fadeDown {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
-ms-transform: translateY(0px);
}
100% {
-webkit-transform: translateY(500px);
transform: translateY(500px);
-ms-transform: translateY(500px);
}
}
.fadeDown {
-webkit-animation-name: fadeDown;
animation-name: fadeDown;
}
.main {
-webkit-animation-name: fadeDown;
-webkit-animation-duration: 2s;
animation-name: fadeDown;
animation-duration: 2s;
}
<div class="main">
<app-a>App a</app-a>
<div class="container">
<app-b-menu>App b</app-b>
</div>
</div>
我会寻求帮助。我想做动画。将滚动设置在页面中间
解决方案
试试这个代码
html
<div class="main">
<app-a>App a</app-a>
<div class="container">
<app-b-menu>App b</app-b>
</div>
</div>
css
@-webkit-keyframes fadeDown {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
-ms-transform: translateY(0px);
}
100% {
-webkit-transform: translateY(50vh);
transform: translateY(50vh);
-ms-transform: translateY(50vh);
}
}
@keyframes fadeDown {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
-ms-transform: translateY(0px);
}
100% {
-webkit-transform: translateY(50vh);
transform: translateY(50vh);
-ms-transform: translateY(50vh);
}
}
.fadeDown {
-webkit-animation-name: fadeDown;
animation-name: fadeDown;
}
.main {
-webkit-animation-name: fadeDown;
-webkit-animation-duration: 2s;
animation-name: fadeDown;
animation-duration: 2s;
animation-delay: 2s;
-webkit-animation-delay: 2s;
}
推荐阅读
- c - 自动配置忽略 CFLAGS?
- python - Calling External Command using 'for' or 'While' loop
- liquibase - liquibase sqlFile complains that "File does not exist"
- ios - 在 iOS 模拟器上运行 Safari
- python-3.x - Number guessing game that requires suggestions for completion
- php - Hide DIV or button based on query result
- pytest - How to assert a class is decorated by a function in unit test in Python?
- javascript - Angular 8,用户输入和更新连同用户输入和选中的复选标记
- vb.net - DataGridView losing DataSource after Window Losing Focus
- c++ - TCP client fails to read all data with read