CSS动画是网页设计中不可或缺的技术，能够为网页增添美丽的动态效果。其中变大和变小的动画是最常见也是最基本的一种。

/* 变大动画 */
.box {
transition: transform 0.3s ease-out;
}
.box:hover {
transform: scale(1.2);
}
/* 变小动画 */
.box {
transition: transform 0.3s ease-out;
}
.box:hover {
transform: scale(0.8);
}

首先，我们给需要变化大小的元素加上transition属性，表示此元素的变化过程需要动画效果。接着，我们分别定义对象的初始和结束状态。以变大动画为例，初始状态即为原来的大小，当鼠标移过时，对象大小变为原来的1.2倍，这个过程在0.3秒内完成，其中ease-out表示变化的速率逐渐减慢。同理，变小动画也是在鼠标移过时让对象变小到原来的0.8倍。

这两种变化大小的动画，不仅简单易学，而且能够给网页带来活力。当然，除了变大和变小动画外，CSS还有许多其他种类的动画效果可供选择，比如旋转、移动等等。