css - 如何添加 webkit-keyframes 动画延迟

Question

现在我的代码让动画出现然后应用 2 秒延迟然后动画运行。

如何防止动画在延迟之前先出现然后再出现？

@-webkit-keyframes fadeInUp1 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp1 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

    100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.fadeInUp1 {
  -webkit-animation-name: fadeInUp1;
  animation-name: fadeInUp1;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

Answer 1

您可以使用 animation-fill-mode :

The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.

backwards
The animation will apply the values defined in the first relevant keyframe as soon as it is applied to the target, and retain this during the animation-delay period.

.fadeInUp1 {
  animation-fill-mode: backwards;
}

@-webkit-keyframes fadeInUp1 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUp1 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}
.fadeInUp1 {
  -webkit-animation-name: fadeInUp1;
  animation-name: fadeInUp1;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}

<div class="fadeInUp1">Lorem ipsum</div>