Question

是否有一种CSS方法可以隐藏元素并在x秒后使用关键帧动画将其淡入？或者我需要JavaScript / jQuery吗？怎么做？

此刻，它也会在动画开始之前显示，如果我设置opacity: 0;，动画在动画完成后会跳回到该值。

Fiddle

Answer 1

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

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

希望有所帮助！

Answer 2

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

 animation-fill-mode: both;

将前后保持动画。

Answer 3

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

您可以将4秒的延迟和1秒的动画持续时间更改为5秒的动画，关键帧从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;
}

Answer 4

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

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

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

Answer 5

您可能正在考虑使用CSS transitions - 此页面可能有您正在寻找的答案。

CSS关键帧动画：在动画开始之前隐藏元素

5 个答案: