CSS隐藏元素，5秒钟后显示 [英] CSS hide element, after 5 seconds show it

问题描述

我发现了这个问题 5秒后CSS自动隐藏元素

，我需要知道如何做到这一点。
基本上是：

and I need to know how to do the oposite of this. Basically:

-页面加载时隐藏了元素

-Page loads with element hidden

-等待5秒

-显示元素

我对CSS不太满意，所以任何帮助都很好！

I'm not very good with CSS so Any help would be nice!

#thingtohide {
    -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;
    }
}

推荐答案

尝试这个简单的解决方案。

try this simple solution.

#showMe {
  animation: cssAnimation 0s 5s forwards;
  visibility: hidden;
}

@keyframes cssAnimation {
  to   { visibility: visible; }
}

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

您可以还使用可见性的不透明性

You can also use opacity insted of visibility

#showMe {
  animation: cssAnimation 0s 5s forwards;
  opacity: 0; 
}

@keyframes cssAnimation {
  to   { opacity: 1; }
}

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

这篇关于CSS隐藏元素，5秒钟后显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！