如何在 CSS3 中实现淡出效果：关键帧动画与过渡？

CSS3 过渡 - 淡出效果

在 CSS3 中，可以通过使用关键帧动画来实现淡出效果。但是，确保正确配置动画设置以达到所需的效果非常重要。

在提供的代码中，上滑动画不起作用，因为顶部属性正在动画化，这会垂直移动元素离开页面。要实现淡出效果，应将不透明度属性设置为动画。下面是代码的更新版本：

<code class="css">@keyframes slideup {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.dummy-wrap {
  animation: slideup 2s;
  -moz-animation: slideup 2s;
  -webkit-animation: slideup 2s;
  -o-animation: slideup 2s;
}</code>

或者，可以使用更简洁的 CSS3 过渡方法：

<code class="css">.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}</code>

要使用此方法淡出元素，只需添加元素的隐藏类：

<code class="css"><div class="success-wrap successfully-saved visible">Saved</div></code>

这将在 2 秒内将元素转换为 opacity: 0，从而创建淡出效果。请注意，visibility: hide 添加了延迟，允许淡出动画在元素隐藏之前完成。

以上是如何在 CSS3 中实现淡出效果：关键帧动画与过渡？的详细内容。更多信息请关注PHP中文网其他相关文章！