文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS隐藏元素，5秒后显示它

问CSS隐藏元素，5秒后显示它
EN

Stack Overflow用户

提问于 2017-10-18 04:29:28

回答 2查看 29.3K关注 0票数 12

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

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

在元素隐藏的情况下加载-Page

-Wait 5秒

-Show元素

我不是很擅长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;
    }
}

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-10-18 04:53:47

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

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

票数 28

Stack Overflow用户

发布于 2017-10-18 04:38:54

你可以运行类似这样的东西。这会将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>

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46798683

复制

相似问题

问CSS隐藏元素，5秒后显示它
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS隐藏元素，5秒后显示它EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS隐藏元素，5秒后显示它
EN