CSS3在動畫效果上做了很多新的改進，其中收縮（collapse）效果是很常用的。通過一些簡單的CSS設置，可以讓元素在收縮時實現流暢動畫效果，為網站的用戶體驗加分。

/* CSS3收縮動畫效果代碼示例 */
.collapse {
/* 設定默認高度 */
height: auto;
/* 指定變化的屬性，這里是高度 */
transition-property: height;
/* 指定變化所需要的時間 */
transition-duration: 0.5s;
/* 指定過渡效果為ease-in-out */
transition-timing-function: ease-in-out;
}
/* 鼠標懸停時應用效果 */
.collapse:hover {
/* 將高度設為0 */
height: 0;
/* 防止內容在收縮時閃爍 */
overflow: hidden;
}

在上面的代碼中，我們將一個類名為“collapse”的元素設定為一個可收縮的元素。在默認狀態下，該元素的高度為“auto”，當鼠標懸停時，我們將它的高度設為0并使用“overflow: hidden”來遮蓋被隱藏的文本。這樣，當元素收縮時，就會有一個流暢的動畫效果。

可以使用這種技術讓導航菜單、折疊面板等可折疊元素擁有更好的用戶體驗。CSS3的動畫效果已經深入到了網頁設計中，它的結合使用為網頁設計提供了很多新的可能性，CSS3收縮動畫效果只是其中之一。