背景线性渐变动画

Question

我想要一个页面加载时运行线性渐变背景动画

所以从这里开始

然后慢慢动画到这个并停止

然而我的动画并没有像我预期的那样结束，它最终飞走了

以下是我目前尝试的

body,
html {
  margin: 0;
  padding: 0;
}

.login-bg {
  min-height: 100vh;
  animation: Animation;
  background: linear-gradient(106deg, #313131 50%, white 50.1%);
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  background-size: 200% 200%;
}

@keyframes Animation {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 50% 0%
  }
}

#wrapper {
  display: flex;
}

#left {
  flex: 0 0 65%;
  color: white;
  margin-left: 10%;
  margin-top: 20%;
}

#right {
  flex: 1;
  margin-right: 20%;
  margin-top: 20%;
}

<div class="login-bg">
  <div id="wrapper">
    <div id="left">Left side div</div>
    <div id="right">Right side div</div>
  </div>
</div>

Answer 1

添加以下内容：

animation-fill-mode: forwards;

body, html {
         margin: 0;
         padding: 0;
         }
         .login-bg {
         min-height: 100vh;
         animation: Animation ;
         background: linear-gradient(106deg,#313131 50%,white 50.1%);
         animation-duration: 3s;
         animation-iteration-count: 1;
         animation-timing-function: ease-in-out;
         animation-fill-mode: forwards;
         background-size: 200% 200%;
         }
         @keyframes Animation {
         0%{background-position:0% 50%}
         50%{background-position:100% 50%}
         100%{background-position:50% 0%}
         }
         #wrapper {
         display: flex;
         }
         #left {
         flex: 0 0 65%;
         color: white;
         margin-left: 10%;
         margin-top: 20%;
         }
         #right {
         flex: 1;
         margin-right: 20%;
         margin-top: 20%;
         }

<div class="login-bg">
         <div id="wrapper">
            <div id="left" >Left side div</div>
            <div id="right">Right side div</div>
         </div>
      </div>

编辑：

停在中间：你必须定义动画的结束点，像这样：

 @keyframes Animation {
       0%{background-position:0% 50%}
       100%{background-position:50% 50%}
     }

body, html {
         margin: 0;
         padding: 0;
         }
         .login-bg {
         min-height: 100vh;
         animation: Animation ;
         background: linear-gradient(106deg,#313131 50%,white 50.1%);
         animation-duration: 3s;
         animation-iteration-count: 1;
         animation-timing-function: ease-in-out;
         animation-fill-mode: forwards;
         background-size: 200% 200%;
         }
         @keyframes Animation {
           0%{background-position:0% 50%}
           100%{background-position:50% 50%}
         }
         #wrapper {
         display: flex;
         }
         #left {
         flex: 0 0 65%;
         color: white;
         margin-left: 10%;
         margin-top: 20%;
         }
         #right {
         flex: 1;
         margin-right: 20%;
         margin-top: 20%;
         }

<div class="login-bg">
         <div id="wrapper">
            <div id="left" >Left side div</div>
            <div id="right">Right side div</div>
         </div>
      </div>