时间戳

首页 > 解决方案 > 多个文本 CSS 动画不会在指定时间开始

html - 多个文本 CSS 动画不会在指定时间开始

问题描述

我正在创建一个带有 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>

标签： htmlcsscss-animations

解决方案

分割动画进入动画，离开动画。现在您可以使用animation-delay（第 4 个参数，在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; }
  }
}
<div class="header-animate-wg">
  <h1> What's good!</h1>
</div>

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

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

推荐阅读