animation - css动画/过渡：一定时间后淡出或上滑元素？

Question

在我当前的页面上是这个……</p>

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

CSS ...</p>

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

CSS3 是否有可能在#wr-notice5 秒内“隐藏”这个？所以当页面加载时#wr-notice应该是可见的，5秒后我想隐藏或动画它。最好的方案是将其高度设置为动画，0使其向上滑动？

CSS3 过渡是否可以实现“计时器”？

关于这件事有什么想法吗？

score 3 · Accepted Answer

这是一个纯 css 解决方案的小提琴。

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

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

编辑2：如果您想了解更多信息，只需谷歌“css 关键帧动画”或其他内容。

score 2 · Accepted Answer

使用 CSS3，您可以使用动画延迟元素。引自网站：

animation-delay 属性定义动画何时开始。

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

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

2 回答 2