CSS3过渡-淡出效果

小编典典

CSS3过渡-淡出效果

css

我正在尝试在纯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>

阅读 893

2020-05-16

共1个答案

小编典典

您可以改用转换：

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

2020-05-16