javascript - 使用 CSS 动画使元素在页面加载后隐藏 n 秒

Question

几年前，我们为阻止 JS 的用户在我们的网页上添加了一条注释。对于使用 JS 的人，我真的希望该注释保持隐藏状态。笔记的可见性依赖于具有 body class="noJS" 类的正文。为了尽可能快地删除它，我将 JS 作为 body 标签中的第一项，它不依赖于任何东西，而是立即触发。

<!-- BODY element exists! -->
<script type="text/javascript">
    /*<![CDATA[*/ 
        document.body.className = document.body.className.replace(new RegExp(\'(?:^|\\s)\'+ \'no-js\' + \'(?:\\s|$)\'), \' \'); 
    /*]]>*/ 
</script>

在 Firefox 中，我仍然看到注释为红色闪烁，例如在主页顶部 https://www.colorperfect.com

烦人，这引出了我的问题，我可以使用 CSS3 动画在延迟一秒后淡入该音符吗？我想这应该可以解决它，但我从来没有用 CSS 动画做过任何事情，所以我想我会问而不是摆弄......如果那不起作用，也欢迎其他想法。

编辑:

这是生成红色 block 的 CSS。简单的交换背景和高度。

body.noJS .single_navi_zeile
{
  background-color:#BB0000;
  height:12.7em;
  background-position: left 0.5em bottom 0.3em;
  background-repeat: no-repeat;
  background-image: url("../grafik/nojs.png");
}

Answer 1

这应该会为您提供您所追求的淡入淡出效果。动画延迟会在动画开始时延迟，因此您最终可能会看到元素出现，然后突然消失，然后再次淡入。 如果您立即开始播放动画，但从 opacity: 0 开始，然后在 1 秒(2 秒持续时间的 50%)后淡入淡出，您应该会得到想要的效果。

@keyframes fade-in {
  0% {opacity: 0}
  50% {opacity: 0}
  100% {opacity: 1}
}

.anim-fade-in {
  animation-name: fade-in;
  animation-duration: 2s;
}

<p class="anim-fade-in">Some content</p>

值得注意的是，此方法仅使用不透明度隐藏元素，因此您可能会发现页面内容随着元素本身的存在而移动，然后才被移除。您可以尝试将元素滑入。