CSS3動畫開辟了一條新的道路，允許我們創建一些令人驚嘆的效果。今天我們將要探討的是如何使用CSS3動畫實現收縮效果。

.container {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.item {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 0.5s ease-out;
}
.item.shrink {
transform: scale(0.8);
opacity: 0.5;
}

我們將需要兩個元素，一個容器，一個是要收縮的項。通過將容器的寬度和高度設置為固定值，并將overflow屬性設置為hidden，我們可以確保收縮的效果將不會超出容器的邊界。

我們還需要使用position屬性以及left和top屬性來使項絕對定位在容器中。為項添加transition屬性將使其平滑地從原始位置轉換到縮小的位置。

最后，我們通過添加shrink類來實現收縮效果。scale屬性控制元素的縮放值，而opacity屬性控制元素的透明度。

現在我們已經了解了如何使用CSS3動畫實現收縮效果。通過運用我們的想象力，我們可以完成更加復雜的CSS3動畫效果。