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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-15 21:12