CSS手風琴動畫是一種在網頁設計中常用的動畫效果之一。通過使用CSS的transition屬性和設置元素高度的方式，可以使得網頁內容按照一定的動畫效果展示給用戶。下面的例子展示了如何通過CSS手風琴動畫，實現網頁內容的展開和折疊。

/*CSS樣式*/
.accordion {
width: 100%;
}
.accordion__item {
overflow: hidden;
transition: all .3s ease-out;
}
.accordion__item__title {
font-weight: bold;
cursor: pointer;
padding: 10px;
border: 1px solid #ccc;
border-bottom: none;
}
.accordion__item__content {
padding: 10px;
border: 1px solid #ccc;
}
/*HTML結構*/
<div class="accordion">
<div class="accordion__item">
<div class="accordion__item__title">標題1</div>
<div class="accordion__item__content">內容1</div>
</div>
<div class="accordion__item">
<div class="accordion__item__title">標題2</div>
<div class="accordion__item__content">內容2</div>
</div>
<div class="accordion__item">
<div class="accordion__item__title">標題3</div>
<div class="accordion__item__content">內容3</div>
</div>
</div>
/*JavaScript代碼*/
var toggleAccordion = function() {
var accordionItem = this.parentNode;
accordionItem.classList.toggle('active');
}
var accordionItems = document.querySelectorAll('.accordion__item__title');
for(var i = 0; i < accordionItems.length; i++) {
accordionItems[i].addEventListener('click', toggleAccordion);
}

以上代碼包含了CSS樣式、HTML結構以及JavaScript代碼三個部分。其中，CSS樣式定義了手風琴動畫的主要樣式和布局，包括手風琴寬度、每個元素的樣式和過渡效果等。HTML結構則包括手風琴的結構，每個手風琴元素的標題和內容在不同的div中顯示。JavaScript代碼則定義了手風琴元素的展開和折疊事件。

通過這個例子，可以看到CSS手風琴動畫的實現十分簡單，只需要設置好每個手風琴元素的高度以及添加過渡效果即可實現動畫效果。在網頁設計中，手風琴動畫常用于展示帶有標題和摘要的列表，能夠使用戶更快速地了解網站內容和導航。同時，為了增加用戶的交互性，我們可以在手風琴元素的標題部分添加鼠標點擊事件，當用戶點擊標題時，手風琴元素的內容會展開或折疊，更加方便用戶的閱讀和操作。