CSS隐藏元素，5秒后显示它[重复]

Question

我发现了这个问题CSS Auto hide elements after 5 seconds

我需要知道如何做相反的事情。 基本上：

-隐藏元素的页面加载

-等待 5 秒

-显示元素

我不太擅长 CSS，所以任何帮助都会很好！

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

Answer 1

你可以运行这样的东西。这会将opacity 设置为 0，并在几秒钟后将其斜升至 100%。此选项允许您微调希望它出现的速度，让您控制元素的不透明度以及在时间范围内的时间。

#showMe {
    opacity: 0;
    -moz-animation: cssAnimation 5s;
    /* Firefox */
    -webkit-animation: cssAnimation 5s;
    /* Safari and Chrome */
    -o-animation: cssAnimation 5s;
    /* Opera */
    animation: cssAnimation 5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    99% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes cssAnimation {
    99% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

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

Answer 2

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

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

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

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

您还可以使用不透明度设置为可见性

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

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

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