display与visibility&css渐变效果问题

今天开始做第二个静态页面，这次选择模仿有道翻译页面。并且尽量不参考源代码。

其中发现比较麻烦的是窗口弹出、弹出渐变效果和语言选择的下拉窗口。
目前已解决了前两个问题，当然解决了第二个问题的前提就是得解决第一个问题。第一个问题的解决其实比较简单，由于之前没有弄过类似的问题所以刚开始会觉得有点麻烦。在这次选择的静态页面作业中，在顶部导航栏中的人工翻译会遇到普通的窗口弹出。

其实就是display： none；到display： block；的变化。用具体代码呈现的话就是
css

#artificial{
    position: relative;
}
#artificial:hover .kind{
    display: block;
}
.kind{
    width: 430px;
    height: 177px;
    padding: 28px 30px 15px 30px;
    position: absolute;
    right: -227px;
    top: 55px;
    border-radius: 4px;
    border: 1px solid rgb(201,201,201);
    background-color: #fff;
    display: none;
}

第二种处理起来会比较麻烦，因为需要设置css的渐变动画效果。在这个过程中，display会与动画效果产生冲突。这时候选择不使用display属性，转而使用visibility， opacity这两个属性。
首先先介绍一下visibility属性

visibility

1	2
visible	默认值。元素是可见的。
hidden	元素是不可见的。
collapse	当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。
inherit	规定应该从父元素继承 visibility 属性的值。

其中用的比较多的是visible和hidden。
其实visibility的作用于display的作用很像，但其实还是有区别的。
最难以比较的我认为是display：none与visibility：hidden这两个。它们的作用都是将元素隐藏起来。
在我的理解中，display：none的作用的让元素消失，当元素设置该属性时，页面不会为该元素保留空间，即后面的元素会填补该元素的位置；但在visibility：hidden中，虽然是将元素隐藏，但页面会为该元素保留其空间，即后面的元素不会向前补充，他的作用仅是让该元素不可见，可以理解为元素都便透明了。值得注意的是，在visibility：hidden中，若想要触发该元素的事件是没有效果的。因为当元素隐藏后，是无法接收其他事件的。
他们最根本的区别就是：visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征。
在一定条件下，其实visibility可以代替display属性。在第二个问题的解决中就会使用这个方法。
然后就是动画的设置

.tips{
    width: 144px;
    height: 50px;
    padding: 10px 13px 20px 13px;
    position: absolute;
    right: -31px;
    top: 48px;
    border-radius: 4px;
    border: 1px solid rgb(201,201,201);
    background-color: #fff;
    text-align: center;
    transition:all 1s;
    -webkit-transition:all 1s;
    visibility: hidden;
    opacity: 0
}

以及事件触发代码

.artitran:hover .tips{
     visibility: visible;
     opacity: 1
}

不过这个串代码单独尝试还是有点问题，放在自己的作业中又是可以显示效果的，问题出现在哪还是没有找出来。

其实还有试过其他的动画尝试
html

<a href="#">
    <span><i>a</i></span>
    <img src="图片路径" class="img"/>
</a>

css

.img{
    display: none;
}
/*动画效果*/
@-webkit-keyframes fadeIn {
    0% {
    opacity: 0; /*初始状态 透明度为0*/
    }
    50% {
        opacity: .5; /*中间状态 透明度为0.5*/
    }
    100% {
        opacity: 1; /*结尾状态 透明度为1*/
    }
}
a:hover .img{
    display: block;
    position: absolute;
    margin-left: -10px;
    margin-top:-200px;
    z-index: 99;
    /*调用动画效果*/
    -webkit-animation-name: fadeIn; /*动画名称*/
    -webkit-animation-duration: 0.5s; /*动画持续时间*/
    -webkit-animation-iteration-count: 1; /*动画次数*/
    -webkit-animation-delay: 0s; /*延迟时间*/
}

这串代码可以单独使用就能显示效果，但放在自己的作业中又有问题，css的动画问题还有很多没有解决，因为是第一次尝试所以还有很多不懂的地方，希望下次能够解决掉吧！