CSS 折疊展開動畫是現在網頁開發中比較流行的一種動畫效果。它可以讓網站用戶以更直觀、更清晰的方式瀏覽頁面內容，也能讓設計師更好地展示內容，使網站更加美觀和易于使用。

CSS 折疊展開動畫的原理其實很簡單，就是通過CSS的 transition 屬性來實現元素從顯示到隱藏的過渡效果。通常，我們使用普通的 HTML 等標簽來創建這種折疊效果，比如div、span、ul等。

<div class="expand">
<h3 class="title">折疊標題</h3>
<p class="content">折疊內容</p>
</div>

上述代碼中，我們使用了 div 標簽作為整個折疊效果的外層容器，其中標題和內容的標簽分別使用了 h3 和 p。

接下來，我們需要定義 CSS 樣式來實現折疊效果：

.expand .content {
height: 0;
overflow: hidden;
transition: height 0.3s ease;
}
.expand.active .content {
height: 100px;
}

以上代碼中，我們給內容部分定義了高度為0，這樣在初始化的時候，內容部分就會被隱藏。同時，我們還定義了過渡效果，即當高度變化時，會以0.3秒的時間延遲執行，以緩慢地展示折疊效果。而在 .expand.active .content 樣式中，我們通過添加 .active 類來控制內容部分的高度，以此來實現折疊展開的效果。

最后，我們需要 JavaScript 代碼來通過控制 .active 類的添加和刪除來實現折疊效果：

const expand = document.querySelector('.expand');
const content = expand.querySelector('.content');
const title = expand.querySelector('.title');
title.addEventListener('click', () =>{
expand.classList.toggle('active');
});

以上代碼中，我們首先獲取到 .expand 元素和內部的 .content、.title 元素，然后在點擊 .title 時，使用 toggle 方法來添加或刪除 .active 類，從而實現折疊效果的切換。

通過這樣的方式，我們就可以實現 CSS 折疊展開動畫效果了。