CSS3動畫是前端開發中很常見的一個技能，能夠讓網頁變得更加生動有趣。其中，顯示div的動畫也是很實用的技巧，本文就來介紹一下如何使用CSS3實現顯示div的動畫效果。

/* 定義div的樣式 */
.box {
width: 200px;
height: 200px;
background-color: #F6CFCF;
display: none; /* 隱藏div */
position: absolute; /* 絕對定位 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 定義動畫效果 */
@keyframes showBox {
0% {
display: none; /* 隱藏 */
opacity: 0; /* 透明度為0 */
}
50% {
display: block; /* 顯示 */
opacity: 0.5; /* 透明度為0.5 */
}
100% {
display: block; /* 顯示 */
opacity: 1; /* 透明度為1 */
}
}
/* 給div添加動畫效果 */
.box.show {
animation: showBox 1s ease-in-out forwards;
}

以上代碼中，我們先定義了一個樣式為.box的div，然后設置它的初始狀態為display:none，即默認隱藏狀態。接著，我們定義了一個@keyframes動畫效果，名為showBox，分別定義了0%、50% 和100%時的樣式變化。最后，我們將動畫應用在.show類上，以便在div顯示時能夠啟動動畫效果。

如此一來，當我們需要顯示這個div時，只需要通過JavaScript添加.show類即可實現動畫顯示效果，代碼如下：

const box = document.querySelector('.box');
box.classList.add('show');

這里使用了ES6語法中的const和classList.add方法來添加.show類，這樣就能讓div顯示出來，并且啟動顯示動畫。至此，一個簡單的CSS3動畫顯示div效果就完成了！