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可以“隐藏”这个#wr-notice 5秒钟吗？因此，当页面加载时，#wr-notice应该是可见的，并且在5秒后我想隐藏或动画它。最好的方案是将其高度设置为0，以便它可以滑动？

使用CSS3过渡是否可以使用“计时器”？

关于此事的任何想法？

Answer 1

这是fiddle，具有纯净的css溶液。

我在Firefox中尝试过，但是在Chrome中移动视口时出现了问题。背景不会被重绘，因此绿色背景在文本移动时看起来是静止的。但是元素实际上正在移动，所以我猜你只需要忍受这种情况，除非有人能想出一个黑客。如果在视口中移动对象，它将起作用。也许有人应该报告错误，但无论如何。

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

编辑2：如果你想了解更多只是谷歌“css关键帧动画”或其他东西。

Answer 2

使用CSS3，您可以使用animation-delay元素。引自网站：

  

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

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

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