12

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

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

小提琴

4

5 回答 5

32

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

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

希望有帮助！

于 2013-03-14T10:48:05.110 回答
22

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

 animation-fill-mode: both;

将保持动画前后。

于 2017-08-26T18:12:17.193 回答
4

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

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

见小提琴。

@-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;
}
于 2013-03-14T08:52:26.350 回答
2

如果您希望您的动画与使用不透明度的淡入不同，例如为宽度设置动画；你可以把opacity:1;动画的 1% 放在上面：

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

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

于 2013-10-15T15:33:10.400 回答
1

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

于 2013-03-14T08:45:46.193 回答