在網頁設計中，動畫效果能夠極大地增強用戶體驗，而使用CSS3制作動畫效果，可以讓我們做到自主控制動畫，易于實現，而且不需要JS的介入。

/* 創建一個全屏動畫效果 */
.fullscreen {
width: 100vw;  /* 100%視窗寬度 */
height: 100vh; /* 100%視窗高度 */
position: relative;
}
/* 創建一個收縮動畫的容器 */
.shrink {
transform: scale(0);
transition: all 1s ease;
}
/* 創建一個放大動畫的容器 */
.expand {
transform: scale(1.5);
transition: all 1s ease;
}
/* 讓容器動態改變大小 */
.fullscreen:hover .shrink {
transform: scale(1);
}
.fullscreen:hover .expand {
transform: scale(2);
}

上面的代碼實現了一個簡單的收縮動畫和放大動畫。將這些代碼應用到想要添加動畫效果的HTML對象中即可，例如：

<div class="fullscreen">
<img src="example.jpg" class="shrink expand">
</div>

這段代碼創建了一個全屏容器，并添加了一個圖片對象。圖片對象同時擁有收縮和擴大的功能，當鼠標懸停在全屏容器上時，圖片對象像拔河比賽一樣收縮和擴大。

以上這個例子只是CSS3動畫效果的冰山一角。CSS3提供了很多強大的動畫效果，例如淡入淡出、旋轉、翻轉、滑動、旋轉等等。敬請嘗試！