5秒后Css自动隐藏div [英] Css auto hide div after 5 seconds

问题描述

使用下面的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; 
仓位：绝对; 
} 
} 

解决方案

比为每个浏览器定义Jquery更好。

（document）.ready（function（）{

setTimeout（function（）{

（'。success'）。slideUp（slow）;
}，5000）;
}）;

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

解决方案

Than defining for each browser Jquery is better.

(document).ready(function () { setTimeout(function() {

('.success').slideUp("slow"); }, 5000); });

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