Question

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

＆＃13;

#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;
  }
}

＆＃13;

<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>

＆＃13;

Answer 1

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

＆＃13;

#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;
  }
}

＆＃13;

<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>

＆＃13;

您可以阅读here：

转发

目标将保留最后设置的计算值   执行期间遇到关键帧。

Answer 2

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

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

你想用线性和褪色组合来完成什么？

在动画结束后显示内容

2 个答案: