CSS隐藏元素，5秒后显示

标签 css

<分区>

我发现了这个问题 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;
    }
}

最佳答案

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

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

关于CSS隐藏元素，5秒后显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46798683/

上一篇：css - 为什么我的 css 代码在 vuejs 中不起作用？

下一篇：css - 高度 :100% works in Chrome but not in Safari

相关文章：

html - 滚动条将元素推到新行

html - 使用定义列表的伪表

javascript - 使弹出模式对话框在出现后可移动/可拖动

html - 使背景图像既固定又适合容器尺寸

css - 当其他列只有一个元素时，如何对一列中的元素数组使用网格布局？

html - 如何控制底部边框的间距？

html - 仅内联文本元素的 bg 颜色填充的一些问题

javascript - 使用 obj.style.marginTop 获取 margin-top 失败，但如果首先显式设置 marginTop 则有效

html - 当我没有指定固定宽度时，div 如何居中？

javascript - 更改浏览器的窗口大小以进行测试