当我明确隐藏时，为什么这个div标签可见？

Question

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

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

HTML：

 <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>        

 <div class="featuredprojectscontainer">
        <div id="firstad" class="slideDown" >


        </div><!-- end of first ad -->

        <div id="secondad" class="animationdelay invisible slideDown2">

        </div><!-- end of second ad -->

    </div><!-- end of featured projects container -->

这是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%);
  }
}

这也可以在CodePen上查看，以便于阅读： 点击此处 。

在动画强制它从屏幕上下拉之前，蓝色框应该是不可见的。 但是盒子是可见的，然后它变得不可见并从顶部下降。 这让我很困惑。

任何帮助将非常感激。

Answer 1

在您的CSS（您的codepen中的第122行）中，您调用了： visibility: visible !important;

事实上，它位于样式表的较低位置，而且它有一个!important标记，这会导致它覆盖第17行的先前规则。

删除规则将解决它。

Answer 2

这是因为css特异性

你有visibility: visible !important; 在.slideDown2 ，它覆盖#secondad规则

创建一个更具体的规则来覆盖它

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