CSS倒水動畫是一種在網頁設計中被廣泛采用的動畫效果，通過用CSS來控制元素的位置和屬性，使水從一個容器中倒出來并產生波浪的效果。

.container {
width: 200px;
height: 200px;
border: 1px solid #ccc;
position: relative;
overflow: hidden;
}
.water {
width: 100%;
height: 100%;
position: absolute;
top: 100%;
left: 0;
background: #06C;
animation: water 2s infinite;
}
.wave {
width: 100%;
height: 30px;
position: absolute;
bottom: 0;
left: 0;
background: #06C;
opacity: 0.5;
animation: wave 2s infinite;
}
@keyframes water {
0% {
top: 100%;
}
100% {
top: -50%;
}
}
@keyframes wave {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(15deg);
}
100% {
transform: rotate(0deg);
}
}

上面的代碼中，我們首先定義了一個創建容器的類.container，通過設置position:relative和overflow:hidden屬性來使容器內部的元素只顯示在容器范圍之內。

倒水效果通過創建一個類.water，設置它的position為absolute，然后讓它的top值從100%逐漸到-50%變換，實現沿著容器邊緣倒出水的動畫效果。

波浪效果則是通過創建一個類.wave，設置它的position為absolute，然后使用rotate變換讓它在水的邊緣產生波浪效果。

最后我們使用CSS3的@keyframes屬性來控制水和波浪的動畫效果，讓它們在2秒內無限循環。