动画结束后显示内容

Question

我想制作带有延迟的动画 css。第一个 div 必须隐藏，动画结束后我想显示我的 div。但是我的 div 隐藏了之后。

#test p {
  margin-top: 25px;
  font-size: 21px;
  text-align: center;
  opacity: 0;
  animation: fadein 2s linear 2s;
  -moz-animation: fadein 2s linear 2s;
  /* Firefox */
  -webkit-animation: fadein 2s linear 2s;
  /* Safari and Chrome */
  -o-animation: fadein 2s linear 2s;
  /* Opera */
}

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

@-moz-keyframes fadein {
  /* Firefox */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadein {
  /* Safari and Chrome */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-o-keyframes fadein {
  /* Opera */
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<div id="test">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Answer 1

只需将forwards（animation-fill-mode）与动画一起使用：

#test p {
  margin-top: 25px;
  font-size: 21px;
  text-align: center;
  opacity: 0;
  animation: fadein 2s linear 2s forwards;
  /*OR
    animation: fadein 2s linear 2s;
    animation-fill-mode:forwards;
    */
}

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

<div id="test">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

如你所见here:

转发

目标将保留 last 设置的计算值 关键帧在执行过程中遇到。

Answer 2

似乎删除fadein 2s 之后的linear 2s 允许此工作。

animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */

你试图通过结合线性和淡入淡出来完成什么？