CSS3 Transition - 淡出效果

Question

我正在尝试在纯 CSS 中实现“淡出”效果。这是 fiddle .然而，在阅读 documentation online 之后，我确实在线查看了几个解决方案。 ，我想弄清楚为什么幻灯片动画不起作用。有什么指点吗？

.dummy-wrap {
  animation: slideup 2s;
  -moz-animation: slideup 2s;
  -webkit-animation: slideup 2s;
  -o-animation: slideup 2s;
}

.success-wrap {
  width: 75px;
  min-height: 20px;
  clear: both;
  margin-top: 10px;
}

.successfully-saved {
  color: #FFFFFF;
  font-size: 20px;
  padding: 15px 40px;
  margin-bottom: 20px;
  text-align: center;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #00b953;
}

@keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

@-moz-keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

@-webkit-keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

@-o-keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}

<div class="dummy-wrap">
  <div class="success-wrap successfully-saved">Saved</div>
</div>

Answer 1

这是另一种方法。

淡入效果

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}

淡出效果

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

更新 1:我找到了更多最新教程 CSS3 Transition: fadeIn and fadeOut like effects to hide show elements和 Tooltip Example: Show Hide Hint or Help Text using CSS3 Transition这里有示例代码。

更新 2:(@big-money 要求添加的详细信息)

当显示元素时(通过切换到 visible 类)，我们希望 visibility:visible 立即启动，所以只转换不透明度属性就可以了。并且在隐藏元素时(通过切换到隐藏类)，我们希望延迟 visibility:hidden 声明，以便我们可以首先看到淡出过渡。我们通过在 visibility 属性上声明一个转换来做到这一点，持续时间为 0 秒，并且有一个延迟。可以看详细文章here .

我知道我来不及回答了，但发布这个答案是为了节省其他人的时间。