CSS关键帧动画：动画开始前隐藏元素答案

【问题标题】：CSS Keyframe animation: Hiding element before animation startsCSS关键帧动画：动画开始前隐藏元素
【发布时间】：2017-08-27 02:12:17
【问题描述】：

有没有一种 CSS 方法来隐藏元素并在 x 秒后用关键帧动画淡入它？或者我需要 JavaScript/jQuery 吗？怎么做？

目前也是在动画开始前显示，如果我设置opacity: 0;，动画完成后会跳转回那个值。

Fiddle

【问题讨论】：

查看jsfiddle.net/SO_AMK/VV2ek

标签： jquery css css-animations

【解决方案1】：

你很接近。一个简单的方法是添加animation-fill-mode: forwards;，它将保留最后一个关键帧，在这种情况下保持 div 可见。

这是您的Fiddle 的更新版本，其中动画在 4 秒后开始（如您指定）并保持 div 可见而不是跳回其原始状态 (opacity: 0;)。

希望对您有所帮助！

【讨论】：

【解决方案2】：

最简单的方法就是将其添加到 CSS 中：

 animation-fill-mode: both;

将保持动画前后。

【讨论】：

这应该是公认的答案，因为它也是在动画开始之前隐藏 div 的唯一方法。
这对我来说是最好的答案。接受的那个在我的情况下不起作用。
这是正确答案；我更喜欢前锋

【解决方案3】：

如果您想使用@keyframes，请使用关键帧应用延迟。

您可以将 4s 的延迟和 1s 的动画持续时间更改为 5s 的动画，其中关键帧从 80% 开始。

见fiddle。

@-webkit-keyframes slidein {
    0% { opacity: 0; }
    80% { opacity: 0; }
    100% { opacity: 1; }
}

@-moz-keyframes slidein {
    0% { opacity: 0; }
    80% { opacity: 0; }
    100% { opacity: 1; }
}

@-o-keyframes slidein {
    0% { opacity: 0; }
    80% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes slidein {
    0% { opacity: 0; }
    80% { opacity: 0; }
    100% { opacity: 1; }
}

div {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 150px;
    right: 150px;
    background-color: black;
    -webkit-animation: slidein 5s ease 1 normal;
       -moz-animation: slidein 5s ease 1 normal;
         -o-animation: slidein 5s ease 1 normal;
            animation: slidein 5s ease 1 normal;
}

【讨论】：

【解决方案4】：

如果您希望您的动画不同于使用不透明度的淡入，例如动画宽度；您可以将 opacity:1; 放在动画的 1% 上：

@keyframes slidein {
  0% {
    opacity:0;
    width:0;
  }
  1% {
    opacity:1;
  }
  100% {
    opacity:1;
    width:100px;
  }
}

请注意，您必须在动画结束时重复 opacity:1;，即 100%。否则它将淡出该元素。

【讨论】：

【解决方案5】：

您可能正在寻找使用CSS transitions - 这个页面可能有您正在寻找的答案。

【讨论】：