Jquery 为什么这个div标签是可见的，而我已经清楚地把它隐藏起来了？

我正在尝试一个动画效果，第二个动画效果应该延迟两秒钟。在此延迟中，div标记应该隐藏，但它是可见的

我将首先向您展示两个div标记，然后是我用来制作动画的css

HTML:

也可以在CodePen上查看，以便于阅读：

蓝色框应该是不可见的，直到动画迫使它从屏幕上掉下来。但是盒子是可见的，然后它就不可见了，从顶部往下掉。这真让我困惑

任何帮助都将不胜感激

在CSS中（代码笔中的第122行），您调用了：

可见性：可见！重要的

事实上，它位于样式表的较低位置，并且有一个
！重要信息
标记导致它覆盖您在第17行的上一条规则

删除规则将修复它。
这是因为css的特殊性

您拥有
可见性：可见！重要的在
.slideDown2
中，它将覆盖
#secondad
规则

创建更具体的规则以覆盖它

#secondad.invisible{
  visibility: hidden !important;
}

您拥有
可见性：可见！重要的在
.slideDown2
中，它将覆盖
#secondad
规则谢谢您的回复。但是，在原始文件中，我应该注意，关键帧位于单独的CSS文件（animations.CSS）中，可见性位于style.CSS文件中。代码中首先链接style.css文件，然后链接animations.css文件。我试着按照你的建议做，但没有成功。还有其他建议吗？我明白了，我对它做了一点修改，没有使用
可见性
，而是使用了
不透明度
，然后添加了
动画填充模式
属性，以确保元素在完成时“粘住”。看看叉子：你真棒，非常感谢你的帮助！我真的很感激。我试过这么做，但他们一定把选择权转移到了其他地方。请帮忙！你好，阿伦！谢谢你的回复。我试着照你说的做，但这让div标签一直看不见。我在上面的回复中提到，关键帧在我的文件结构中位于一个单独的css文件中。关键帧位于animations.css中，而#secondad标记位于styles.css文件中。styles.css文件首先在相关索引文件中链接，然后是animations.css。我不确定css的特殊性规则在这里是如何应用的，但在这一点上，我不能只覆盖一个。看来是这样。
/* this is for the featured projects section */
.featuredprojectscontainer{
 width: 79%;
 margin: 0 auto;
 padding: 0;
 display: block;
 position: relative;
 float: right;
 left: 30%;
}

#firstad{
background-color: #70c1b3;
width: 900px;
height: 209pt;
visibility: hidden;
}

#secondad{
margin-top: 13.333px;
width: 900px;
height: 223pt;
background-color: blue;
visibility: hidden;
}




/*
==============================================
slideDown
==============================================
*/

.animationdelay{
-webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
animation-delay: 2s;
}

.invisible, .notvisible{
 visibility: hidden;
}


.slideDown{
 animation-name: slideDown;
 -webkit-animation-name: slideDown;

 animation-duration: 1s;
 -webkit-animation-duration: 1s;

 animation-timing-function: ease;
 -webkit-animation-timing-function: ease;

 visibility: visible !important;
}

@keyframes slideDown {
 0% {
     transform: translateY(-100%);
   }
 50%{
    transform: translateY(8%);
 }
 65%{
    transform: translateY(-4%);
 }
 80%{
    transform: translateY(4%);
 }
 95%{
    transform: translateY(-2%);
 }
100% {
    transform: translateY(0%);
 }
}

@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%);
}
50%{
    -webkit-transform: translateY(8%);
}
65%{
    -webkit-transform: translateY(-4%);
}
80%{
    -webkit-transform: translateY(4%);
}
95%{
    -webkit-transform: translateY(-2%);
}
100% {
    -webkit-transform: translateY(0%);
  }
}


/*
==============================================
More delayed slideDown
==============================================
*/

.slideDown2{
animation-delay: 3s;
animation-delay: 2s, 4ms;
animation-name: slideDown2;
-webkit-animation-name: slideDown2;
animation-duration: 1s;
-webkit-animation-duration: 1s;
-webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
animation-delay: 2s;

animation-timing-function: ease;
-webkit-animation-timing-function: ease;

visibility: visible !important;
}

@keyframes slideDown2 {
0% {
    transform: translateY(-100%);
}
50%{
    transform: translateY(8%);
}
65%{
    transform: translateY(-4%);
}
80%{
    transform: translateY(4%);
}
95%{
    transform: translateY(-2%);
}
100% {
    transform: translateY(0%);
  }
}

@-webkit-keyframes slideDown2 {
0% {
    -webkit-transform: translateY(-100%);
}
50%{
    -webkit-transform: translateY(8%);
}
65%{
    -webkit-transform: translateY(-4%);
}
80%{
    -webkit-transform: translateY(4%);
}
95%{
    -webkit-transform: translateY(-2%);
}
100% {
    -webkit-transform: translateY(0%);
  }
}

#secondad.invisible{
  visibility: hidden !important;
}