CSS動畫展開效果可以為網頁增添生動和美感，讓用戶更加愉悅地使用網頁。我們可以使用CSS的transition和transform屬性來實現這種動畫效果。

/* CSS樣式 */
.box {
width: 100px;
height: 100px;
background: #ccc;
transition: all 0.3s ease-in-out; /*過渡效果*/
}
.box.open {
height: 200px;
transform: rotate(180deg); /*旋轉180度*/
}
/* JavaScript代碼 */
var box = document.querySelector('.box'); // 獲取元素
box.addEventListener('click', function() {
box.classList.toggle('open'); // 切換class
});

如上代碼，我們首先定義了一個名為box的div元素，它的初始高度為100px，背景為灰色。通過CSS的transition屬性，我們定義了所有屬性在0.3秒內漸變過渡。當類名為open的樣式應用于box元素時，高度變為200px，并且使用transform屬性旋轉了180度。

在JavaScript代碼中，我們在box元素上添加了一個click事件監聽器，當用戶點擊框時，我們使用Element.classList.toggle() 方法在open和closed之間切換類名。

現在，我們可以在網頁中看到一個帶有動畫效果的展開框，它能夠為網頁的交互性和美觀度增添不少分數。