CSS動畫是現代網站設計中非常常見的功能。它可以幫助網站增加活力，吸引用戶的注意力。其中一個很有趣的動畫效果就是CSS吃動畫。

//定義初始狀態，被吃掉的元素會隱藏
.chip {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100px;
width: 100px;
border-radius: 50%;
background-image: url('chip.png');
background-size: cover;
transition: all .2s;
z-index: 1;
}
.chip.eaten {
opacity: 0;
z-index: -1;
}
.bite {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100px;
width: 100px;
border-radius: 50%;
background-color: #f00;
animation: eat .5s ease-in;
animation-fill-mode: forwards;
}
@keyframes eat {
0% {
transform: translate(-50%, -50%);
}
50% {
border-radius: 0 0 50% 50%;
transform: translate(-50%, -30%);
}
100% {
border-radius: 0 0 0 0;
transform: translate(-50%, -50%) scale(.5, .5);
}
}

在這段代碼中，我們首先定義了一個圓形元素.chip并設置它的樣式，包括邊框、背景圖片、動畫等。當元素被吃掉時，我們為它添加.eaten類并設置opacity: 0;讓它消失。

然后，我們定義了一個.bite元素，代表咬住的部分。我們為它添加了一個名為eat的動畫，并在其中指定了元素的移動、縮放等屬性。最后，在50%和100%的動畫過程中，我們給元素添加了圓角，使它成為一個半圓形，讓動畫看起來更真實。

這樣，當用戶點擊.chip元素時，它就會被咬住并變為半圓形，最終變成一個小圓球被“吃掉”，使動畫看起來像是被一口咬住的食物。

總的來說，CSS吃動畫是一種非常有趣的動畫效果，可以為網站增加趣味性。通過使用關鍵幀動畫和類名切換，我們可以輕松地實現這種效果。