CSS3動畫顯示隱藏效果
使用CSS3動畫可以實現(xiàn)網(wǎng)頁元素的顯示隱藏效果，這為網(wǎng)頁設(shè)計師帶來了很多的便利。

/*動畫時間*/ 
@-webkit-keyframes show {
0% { opacity: 0; }
100% { opacity:1; }
}
/*動畫名稱*/ 
.animation {
-webkit-animation-name:show;
-webkit-animation-duration:2s;
/*播放次數(shù)*/ 
-webkit-animation-iteration-count:infinite;
/*運動效果*/ 
-webkit-animation-timing-function:linear;
/*自動反向*/ 
-webkit-animation-direction: alternate;
}

上述代碼中，@-webkit-keyframes定義了動畫的時間，我們可以通過0%到100%來定義不同狀態(tài)元素的屬性，這里設(shè)置了初始狀態(tài)的opacity值為0，最終狀態(tài)為1；
.animation為元素加上動畫，-webkit-animation-name指定了動畫名稱，-webkit-animation-duration指定了動畫執(zhí)行的時間，-webkit-animation-iteration-count指定了動畫的執(zhí)行次數(shù)，這里設(shè)置為infinite，代表無限執(zhí)行；
-webkit-animation-timing-function指定了動畫的運動效果，這里設(shè)置為linear代表勻速運動；-webkit-animation-direction指定了動畫的自動反向。

接下來可以通過JS或CSS的 :hover 偽類來實現(xiàn)顯示隱藏效果：

/* 鼠標移入顯示*/
 .box:hover .icon {
opacity: 1;
visibility:visible;
z-index: 1;
 }
/* 鼠標移出隱藏*/
 .box:hover .icon {
opacity: 0;
visibility:hidden;
z-index: -1;
}

在.box類內(nèi)，當鼠標移入時.icon元素的opacity值變?yōu)?，visibility變?yōu)関isible，同時z-index值設(shè)置為1，此時.icon就被顯示出來了；
當鼠標移出時，.icon的opacity變?yōu)?，visibility變?yōu)閔idden，z-index值設(shè)置為-1，此時.icon就被隱藏了，由于z-index為負值，所以此時看不到.icon元素。

以上就是使用CSS3實現(xiàn)元素顯示隱藏效果的方法，這種方法在網(wǎng)頁設(shè)計中經(jīng)常被使用。