CSS 5秒后自动隐藏元素

Question

是否可以在页面加载后 5 秒隐藏元素？ 我知道有一个 jQuery 解决方案。

我想做完全相同的事情，但希望通过 CSS 过渡得到相同的结果。

有什么创新的想法吗？或者我问的是否超出了CSS过渡/动画的限制？

Answer 1

是的！

但是您无法按照您立即想到的方式进行操作，因为您无法围绕您原本依赖的属性（例如

display

，或更改尺寸并设置为

overflow:hidden

）设置动画或创建过渡为了正确隐藏元素并防止它占用可见空间。

因此，为相关元素创建一个动画，并在 5 秒后简单地切换

visibility:hidden;

，同时将高度和宽度设置为零，以防止元素仍然占用 DOM 流中的空间。

小提琴

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#hideMe {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}

HTML

<div id='hideMe'>Wait for it...</div>

Answer 2

根据@SW4的回答，你还可以在最后添加一些动画。

body > div{
    border:1px solid grey;
}
html, body, #container {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#container {
    overflow:hidden;
    position:relative;
}
#hideMe {
    -webkit-animation: cssAnimation 5s forwards; 
    animation: cssAnimation 5s forwards;
}
@keyframes cssAnimation {
    0%   {opacity: 1;}
    90%  {opacity: 1;}
    100% {opacity: 0;}
}
@-webkit-keyframes cssAnimation {
    0%   {opacity: 1;}
    90%  {opacity: 1;}
    100% {opacity: 0;}
}

<div>
<div id='container'>
    <div id='hideMe'>Wait for it...</div>
</div>
</div>

利用剩余的 0.5 秒来设置不透明度属性的动画。 如果您要更改长度，请务必进行数学计算，在本例中，5 秒的 90% 留给我们 0.5 秒的时间来设置不透明度的动画。

Answer 3

当然可以，只需使用

setTimeout

更改类或其他内容即可触发转换。

HTML：

<p id="aap">OHAI!</p>

CSS：

p {
    opacity:1;
    transition:opacity 500ms;
}
p.waa {
    opacity:0;
}

JS 在加载或 DOMContentReady 上运行：

setTimeout(function(){
    document.getElementById('aap').className = 'waa';
}, 5000);

这里有小提琴示例。

Answer 4

为什么不尝试fadeOut？

$(document).ready(function() {
  $('#plsme').fadeOut(5000); // 5 seconds x 1000 milisec = 5000 milisec
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='plsme'>Loading... Please Wait</div>

淡出（纯Javascript）：

如何用纯JavaScript制作淡入淡出效果

Answer 5

您可以在加载时隐藏元素，然后使用 CSS 和关键帧在延迟一段时间后显示它们并为其设置动画，如下所示

   // keyframes fadeIn Animation
   @keyframes fadeIn {
    0% {
     transform:scale(0,0);
     visibility:visible;
      opacity:0;
    }
     100% {
       transform:scale(1,1);
       visibility:visible;
       opacity:1;
      }
     }

    // CSS class
      .containerDiv {
       visibility:hidden;
       animation: fadeIn 3s forwards 3s;

      }

Answer 6

.tooltip {
    -webkit-animation: cssAnimation 1.5s forwards; 
    animation: cssAnimation 1.5s forwards;
}
@keyframes cssAnimation {
    0%   {opacity: 1;}
    50%  {opacity: 1;}
    100% {opacity: 0;}
}
@-webkit-keyframes cssAnimation {
    0%   {opacity: 1;}
    50%  {opacity: 1;}
    100% {opacity: 0;}
}