CSS動畫既可以讓元素出現，也可以讓元素消失。下面我們來分別介紹兩種情況。

元素出現動畫

首先，我們需要先將要出現的元素隱藏起來。可以使用CSS的opacity屬性，將元素的透明度設為0，或是使用display:none;將其隱藏。

.box{
opacity:0;  /*設置透明度*/
transition: opacity .3s ease-in-out;   /*設置過渡動畫*/
}
.box.active{
opacity:1; /*將透明度設為1，使元素出現*/
}

上面的代碼中使用了transition屬性，將透明度設置為過渡動畫。在元素加上active類后，就可以讓透明度漸漸變為1，從而讓元素出現。

元素消失動畫

與元素出現相反，元素消失時我們需要先確定好動畫結束之后要隱藏的元素。可以使用CSS的visibility:hidden;或opacity:0;將其隱藏，同時設置transition屬性添加過渡動畫。

.box{
visibility:visible; /*元素初始狀態可見*/
opacity:1;  /*元素不透明*/
transition: opacity .3s ease-in-out;   /*設置過渡動畫*/
}
.box.hide{
visibility:hidden; /*元素消失后隱藏*/
opacity:0;  /*元素透明度變為0*/
}

同樣，加上hide類后，元素的透明度會漸漸變為0，在動畫結束后，元素就會隱藏起來，完成消失動畫。