html - 在延迟功能工作时使元素不可见

Question

我希望元素一个一个地出现在页面上并带有动画。我创建了动画，但我不知道在使用延迟功能时如何隐藏（不是）元素。display: none

因此，1 秒后，元素会出现appear动画，但是在动画开始之前必须有其他东西来隐藏它。

.insta {
  animation: appear 0.4s linear 1s; 
}
@keyframes appear {
  0% {
    opacity: 0;
    transform: translateX(30%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

<p class=«insta»>Instagram</p>

标签： htmlcsscss-animations

Answer 1

设置不透明度：0。这会隐藏您的文本。使用 animation-fill-mode: forwards 可以让你在动画结束时添加属性。