CSS動畫是Web開發中常用的一種方式，可以讓網頁和應用程序更加動態和生動。其中，放大和縮小動畫效果，是Web開發中一個很基礎和經典的效果，今天我們就來學習如何實現放大和縮小的動畫效果。

/* 放大效果動畫 */
.zoom-in {
/* 設置初始狀態 */
transform: scale(1);
transition: all .3s ease;
}
.zoom-in:hover {
/* 設置鼠標懸停狀態 */
transform: scale(1.1);
}
/* 縮小效果動畫 */
.zoom-out {
/* 設置初始狀態 */
transform: scale(1);
transition: all .3s ease;
}
.zoom-out:hover {
/* 設置鼠標懸停狀態 */
transform: scale(0.9);
}

以上CSS代碼是實現放大和縮小效果的核心代碼。在這些代碼中，我們使用了CSS3的transform屬性來設置元素的縮放大小。同時，我們還使用了CSS3的transition屬性來設置動畫過渡時間和動畫效果。在這兩個屬性的幫助下，我們可以很方便地實現了比較簡單的放大和縮小效果動畫。

另外，值得注意的是，在我們的代碼中，我們使用了:hover偽類來判斷鼠標是否懸停在被應用的元素上。這樣，在鼠標懸停的情況下，我們就可以實現一種動態的放大或縮小效果，增強用戶體驗。

總體來說，放大和縮小效果算得上是CSS動畫中相對簡單的效果了。如果我們想要生成更復雜、更生動的動畫效果，我們需要深入學習CSS動畫的更多特性。希望本篇文章對大家有所幫助。