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

【问题标题】：css animation/transition: fade-out or slide-up element after certain time?css动画/过渡：一定时间后淡出或上滑元素？
【发布时间】：2012-08-24 01:27:06
【问题描述】：

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

<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 过渡是否可以使用“计时器”？

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

【问题讨论】：

我知道使用 jQuery 很容易实现，但是我想知道纯 CSS3 是否也可以。
我在答案中添加了 CSS3 元素。

标签： animation css css-transitions

【解决方案1】：

这是一个fiddle，带有纯 css 解决方案。

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

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

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

【讨论】：

谢谢。是否也可以将其淡出？为不透明度设置动画还是隐藏它？
当然。只需使用您想要动画的任何 css 属性更新@keyframes。请考虑接受这个作为正确答案。

【解决方案2】：

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

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

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

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

【讨论】：

我没有看到 Jquary 或 javascript 作为标签