主页 / 问题 / 1499812
Accepted
Rybin
Asked:2023-02-25 17:57:54 +0000 UTC2023-02-25 17:57:54 +0000 UTC

具有延迟、不透明度的动画

  • 772

我有这样的问题

.title1{
  opacity: 0;
  animation: 3s 2s anim-lineUp ease-out;
}

@keyframes anim-lineUp {
  0% {
    opacity: 0;
    transform: translateY(80%);
  }
  20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: translateY(0%);
  }
  100% {
    opacity: 1;

  }
}

如何让它在动画开始之前延迟块不可见，如果你设置不透明度，就像我的例子一样，那么在动画之后块也会消失

css-animation

2 个回答

  1. Best Answer

    如果问题的本质是元素不会消失，那么它就在这里。

    .title1{
  opacity: 0;
  animation: 3s 2s anim-lineUp ease-out forwards;
  background: green;
  display: block;
  width: 50px;
  height: 50px;
}

@keyframes anim-lineUp {
  0% {
    opacity: 0;
    transform: translateY(80%);
  }
  20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: translateY(0%);
  }
  100% {
    opacity: 1;

  }
}
    <div class="title1"></div>

    • 1

  2. 使用 animation-fill-mode: forwards

    • 0

相关问题