在加载时向文本添加过渡

Question

我正在尝试向我网站上的文本添加过渡，以便在加载页面时，“Hello”的不透明度在第一秒内从 0 变为 1，文本“Name”的不透明度从下一秒0变成1。我尝试使用过渡，但它只适用于悬停而不适用于负载。我尝试了关键帧和动画，但它们仅在指定时间有效，并且页面以默认不透明度 1 加载。要求是这样的： 你好（出现在第一秒有转场） 姓名（下一秒出现转场） 最初两者的不透明度均为 0。请帮忙。

Answer 1

可以使用前进动画。

.hello,
.name {
  opacity: 0;
  animation: fadeIn 1s linear forwards;
}

.name {
  animation-delay: 1s;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

<div class="hello">Hello</div>
<div class="name">there</div>

Answer 2

如果您可以使用 JS，则可以等到所有内容都加载完毕后再触发动画，如果用户未启用 JS，则可以进行回退。

如果您只使用 animation 而没有 JS，动画将在您的页面加载之前开始，用户可能看不到动画。

// WAIT UNTIL THE WINDOW IS FULLY LOADED
window.addEventListener('load', (event) => {
  // GET THE BODY OBJECT
  let body = document.querySelector("body");
  // ADD THE CLASS TO THE BODY
  body.classList.add('js-loaded')
});

@keyframes opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* IF THE USER DOESN'T HAVE JS */

h1 {
  opacity: 1;
}

p {
  opacity: 1;
}


/* IF THE USER HAS JS */

body.js-loaded h1 {
  opacity: 0;
  animation: opacity 1s;
  animation-fill-mode: forwards;
}

body.js-loaded p {
  opacity: 0;
  animation: opacity 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

<body>
  <div>
    <h1>
      This is your header.
    </h1>
    <p>
      Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis.
    </p>
  </div>
</body>

在加载时向文本添加过渡

Adding Transition to text on load

css

animation

transition