首先來看transition的測試結果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#display{
background: grey;
width:200px;
height:100px;
-webkit-transition: all 2s;
}
#display:hover{
background: pink;
width:300px;
display: none;
}
#visibility{
width:200px;
height:100px;
background: #eee;
transition: all 2s;
}
#visibility:hover{
visibility: hidden;
}
</style>
</head>
<body>
<div id="display">display</div>
<div id="visiblity">visibility</div>
</body>
</html>
Ⅰ當將鼠標移到灰塊，2s後灰塊消失，但是並沒有漸變效果；
Ⅱ當將鼠標移到粉塊，粉塊直接消失（一閃一閃的效果）。
解釋如下：
transition與visibility
①transition是支持visibility這個屬性的；
②visibility: 離散步驟，在0到1數字範圍之內，0表示“隱藏”，1表示完全“顯示”；所以產生上述2S後消失但是無漸變的效果。
此外：
#visibility{
width:200px;
height:100px;
background: #eee;
visibility: hidden;
transition: all 2s;
}
#visibility:hover{
visibility:visible;
}是不會產生預期的從無到有漸變的效果，由於visibility：hidden;使元素產生一個不可視的盒子無寬無高，無法與頁面完成一些交互，如此例中的:hover，所以此情況一般用opacity來代替。
transition與display:none;
display:none無法應用transition效果,畢竟不支持啊。
animation與visibility
首先animation支持的屬性表裏是有visibility的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#vis{
background: grey;
width:200px;
height:100px;
visibility:hidden;
animation: dis 1s;
}
@-webkit-keyframes dis{
0%{visibility: hidden;}
100%{visibility: visible;}
}
</style>
</head>
<body>
<div id="vis">this is a box</div>
</body>
</html>塊vis 1S後消失？！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#vis{
background: grey;
width:200px;
height:100px;
visibility:visible;
animation: vis 1s;
}
@-webkit-keyframes vis{
from{visibility: hidden;}
to{visibility: hidden;}
}
</style>
</head>
<body>
<div id="vis">this is a box</div>
</body>
</html>塊vis 1S後顯示？！
animation與display:none;
與transiton一樣animation並不支持display:none;在這裏啥效果也沒有。
先做記錄 還有一些遺留問題待完善。
參考：
張鑫旭http://www.zhangxinxu.com/wordpress/2013/05/transition-visibility-show-hide/
來自stackoverflow http://stackoverflow.com/questions/7857982/css-visibility-animation-not-working
