CSS3过渡-淡出效果

• Z时代
• 2024-01-10
• 分类：问答

我正在尝试在纯CSS中实现“淡出”效果。我确实在网上研究了几种解决方案，但是，在在线阅读文档后，我试图弄清为什么幻灯片动画不起作用。有指针吗？

.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>

回答：

您可以改用转换：

.successfully-saved.hide-opacity{
    opacity: 0;
}
.successfully-saved {
    color: #FFFFFF;
    text-align: center;
    -webkit-transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    -ms-transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out;
     opacity: 1;
}

以上是 CSS3过渡-淡出效果 的全部内容， 来源链接： utcz.com/qa/430085.html