css动画/过渡:在一定时间后淡出或向上滑动元素

Question

在我的当前页面上是这个…

<div id="wr-notice" class="success">
    <div class="wrapper inner message">Thank you!</div>
</div>

css…

#wr-notice {
    position:fixed;
    z-index:1;
    top:0;
    left:0;
    width:100%;
    color:white;
    background:green;
}

CSS3是否可以在5秒钟后"隐藏"此#wr-notice？因此，当页面加载时，#wr-notice应该是可见的，5秒后我想隐藏或动画化它。最好的场景是将其高度动画化为0，这样它就可以向上滑动了？

在CSS3转换中，这种"定时器"可能吗？

对那件事有什么想法吗？

Answer 1

这里有一个纯css解决方案。

我在Firefox中尝试过，但在Chrome中，将某些内容移出视口时会出现问题。背景不会被重新绘制，因此当文本移动时，绿色背景将看起来是静止的。但事实上，这个元素正在移动，所以我想你只能接受它，除非有人能想出一个破解方法。如果在视口中移动对象，它会起作用。也许有人应该报告这个错误，但不管怎样。

编辑：我知道红色背景和光标指针的东西看起来有点奇怪，但我只是想展示Chrome的bug。这些对css来说都不是必不可少的。

编辑2：如果你想知道更多，只需谷歌"css关键帧动画"或其他什么。

Answer 2

使用CSS3，可以使用动画延迟元素。网站报价：

动画延迟属性定义动画何时开始。

如果你想使用Javascript：你可以使用JQuery .delay()元素：

$(document).ready(function() {
  $("#wr-notice").delay(5000).slideUp();
});