Question

我正在使用CSS文本动画创建登录页面。
我想让几行文字一个接一个地显示。
每段文字应呈现2秒钟，并在上一行文字不再呈现之后开始。
我遇到的问题是
文本呈现为不透明，然后进入动画的开始时间和持续时间。
我希望动画在页面上加载，
不呈现（左或上：-300px，）
并在第一个动画停止后进行渲染。

我尝试了各种属性，例如动画延迟和持续时间，但都没有效果。

.header-animate-wg {
  position           : relative;
  animation          : header-animate-wg 2s;
  animation-fill-mode: forwards;
}
@keyframes header-animate-wg {
  0%   { opacity: 0;   top: -300px;}
  50%  { opacity: 1;   top: 0;}
  75%  { opacity: 1;   top: 0;}
  90%  { opacity: 0.2; top: 0;}
  100% { opacity: 0; }
}
.header-animate-im {
  position           : relative;
  animation          : header-animate-im;
  animation-duration : 2s;
  animation-fill-mode: forwards;
}
@keyframes header-animate-im {
  0%   { opacity: 0; left: -300px; }
  90%  { opacity: 1; }
  100% { opacity: 0; }     
}
.header-animate-me {
  position           : relative;
  animation          : header-animate-me 2s;
  animation-fill-mode: forwards;
}
@keyframes header-animate-me {
  0%   { opacity: 0; left: -300px; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}

<div class="header-animate-wg">
  <h1> What's good!</h1>
</div>

<div class="header-animate-im">
  <h1> I'm </h1>
</div>

<div class="header-animate-me">
  <h1> Name </h1>
</div>

Answer 1

分割动画以输入动画并离开动画。现在，您可以使用updateBubbles()（在animation-delay或forwards之后的第四个参数）来安排动画：

both

.header-animate-wg {
  position: relative;
  animation: header-animate-enter-top 1s forwards, 
             header-animate-leave-fade 1s forwards 3s;
}

.header-animate {
  position: relative;
}

.header-animate-im {
  animation: header-animate-enter-left 1s both 1s,
             header-animate-leave-fade 1s forwards 4s;
}

.header-animate-me {
  animation: header-animate-enter-left 1s both 2s,
             header-animate-leave-fade 1s forwards 5s;
}

@keyframes header-animate-enter-top {
  from { top: -100px; opacity: 0 }
  to { top: 0; opacity: 1; }
}

@keyframes header-animate-enter-left {
  from { left: -100px; opacity: 0; }
  to { left: 0; opacity: 1; }
}

@keyframes header-animate-leave-fade {
  from { opacity: 1; }
  to { opacity: 0; }
  }
}

多个Text CSS动画不会在指定的时间开始

1 个答案: