css - 如何在 2 秒后在页面中间添加包含滚动的动画

Question

如何添加在页面加载时开始的动画。将滚动条放在页面中间

我的代码 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>

我会寻求帮助。我想制作动画。设置页面中间滚动

Answer 1

试试这段代码

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;
        }