Javascript JS弹出窗口的CSS动画淡出/淡出

我想在css中为我的JS弹出窗口创建一个

fadeIn

和

fadeOut

效果

fadeIn

效果很好，但不是

fadeOut

效果，我不知道如何更改我的

JS

时间，我尝试了一些东西，但如果我同时使用

fideIn

和

CSS

中的

fadeOut

，弹出窗口就会闪烁。 但是我希望两者都有5秒的效果，同时也有5秒的延迟来显示弹出窗口

CSS-fadeIn:

.fadeInclass {
  animation: fadeIn ease 5s;
  -webkit-animation: fadeIn ease 5s;
  -moz-animation: fadeIn ease 5s;
  -o-animation: fadeIn ease 5s;
  -ms-animation: fadeIn ease 5s;  
}


@keyframes fadeIn{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

var div = document.getElementById("show-popup");    
var showFlag = true;
var myIntv = setInterval(function() {
    if(showFlag){
        div.style.display = 'block'; 
        showFlag = false;
    }
    else{
        div.style.display = 'none';
        showFlag = true;   
   }
}, 5 * 1000);

JS:

.fadeInclass {
  animation: fadeIn ease 5s;
  -webkit-animation: fadeIn ease 5s;
  -moz-animation: fadeIn ease 5s;
  -o-animation: fadeIn ease 5s;
  -ms-animation: fadeIn ease 5s;  
}


@keyframes fadeIn{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

var div = document.getElementById("show-popup");    
var showFlag = true;
var myIntv = setInterval(function() {
    if(showFlag){
        div.style.display = 'block'; 
        showFlag = false;
    }
    else{
        div.style.display = 'none';
        showFlag = true;   
   }
}, 5 * 1000);

使用

js

或

CSS动画添加
fadeIn
和
fadeOut
效果的最佳方法是什么？
5秒
fadeIn
效果，然后停留5秒，再停留5秒
fadeOut
您可以使用一个动画来实现所有这些

前5秒在控件中淡出，在5秒钟内保持完全可见，然后淡出5秒钟


.fadeInclass{
动画：法登轻松15秒；
背景色：红色；
高度：50px；
不透明度：0；
宽度：50px；
}
@关键帧淡入淡出{
0% {
不透明度：0；
}
33% {
不透明度：1；
}
66% {
不透明度：1；
}
100% {
不透明度：0；
}
}
您可以使用单个动画来实现所有这些

前5秒在控件中淡出，在5秒钟内保持完全可见，然后淡出5秒钟


.fadeInclass{
动画：法登轻松15秒；
背景色：红色；
高度：50px；
不透明度：0；
宽度：50px；
}
@关键帧淡入淡出{
0% {
不透明度：0；
}
33% {
不透明度：1；
}
66% {
不透明度：1；
}
100% {
不透明度：0；
}
}
您可以简单地使用带有不透明度的CSS转换：

#popup{
  opacity: 0;
  transition: ease opacity 5s;
}
#popup.fadeInclass{
  opacity: 1;
}

然后只需将.fadeInClass添加/删除到JS中的元素中即可实现所需的目标：

function showPopup(){
  var div = document.getElementById("popup"); 
  div.style.display = 'block'; 
  div.classList.add("fadeInclass");
}

function hidePopup(){
  var div = document.getElementById("popup"); 
  div.classList.remove("fadeInclass");
  setTimeout(function(){
    div.style.display = 'none'; 
  }, 5000);
}

您可以简单地将CSS转换与不透明度一起使用：

#popup{
  opacity: 0;
  transition: ease opacity 5s;
}
#popup.fadeInclass{
  opacity: 1;
}

然后只需将.fadeInClass添加/删除到JS中的元素中即可实现所需的目标：

function showPopup(){
  var div = document.getElementById("popup"); 
  div.style.display = 'block'; 
  div.classList.add("fadeInclass");
}

function hidePopup(){
  var div = document.getElementById("popup"); 
  div.classList.remove("fadeInclass");
  setTimeout(function(){
    div.style.display = 'none'; 
  }, 5000);
}

只有将JS时间设置为
15*1000
，我才能理解15秒。。但是我可以在动画播放5秒后启动它吗？只有当我将JS时间设置为
15*1000
，我才能理解15秒。。但是我可以在动画播放5秒后启动它吗？