5秒后Css自动隐藏div | 5秒后Css自动隐藏div

本文介绍了5秒后Css自动隐藏div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

使用下面的CSS我试图在5秒后隐藏div。但它仅适用于Chrome。 
 
问题：
它不适用于IE和Firefox，它会隐藏div但空间仍然存在。请帮忙。

我尝试过：

< div class =success>已成功保存< / div> 
 
 .success {
 -webkit-animation：秒1.0s前锋; 
 -webkit-animation-iteration-count：1; 
 -webkit-animation-delay：5s; 
 animation：秒1.0s前锋; 
 animation-iteration-count：1; 
动画延迟：5s; 
头寸：相对; 
 
} 
 @ -webkit-keyframes秒{
 0％{
 opacity：1; 
} 
 100％{
 opacity：0;剩余
：-9999px; 
仓位：绝对; 
} 
} 
 @keyframes秒{
 0％{
 opacity：1; 
} 
 100％{
 opacity：0;剩余
：-9999px; 
仓位：绝对; 
} 
}

解决方案

With the below CSS i am trying to hide the div after 5 seconds. But it works only with Chrome.

Problem:
It will not work with IE and Firefox, It will hide the div but space remains. please help.

What I have tried:

<div class="success">Successfully saved</div>

.success {
  -webkit-animation: seconds 1.0s forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 5s;
  animation: seconds 1.0s forwards;
  animation-iteration-count: 1;
  animation-delay: 5s;
  position: relative;
    
}
@-webkit-keyframes seconds {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: -9999px; 
    position: absolute;   
  }
}
@keyframes seconds {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: -9999px;
    position: absolute;     
  }
}

解决方案

这篇关于5秒后Css自动隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！