CSS3中的bounce動畫是一種非常流行的效果，可以給網站帶來非常生動的互動體驗。這種效果的代碼雖然看起來比較復雜，但是實際上并不難理解和實現。

/*定義關鍵幀,其中from表示初始狀態，to表示最終狀態*/
@keyframes bounce {
from, 20%, 53%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transform: translate3d(0,0,0);
}
40%, 43% {
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -30px, 0);
}
70% {
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0, -4px, 0);
}
}
/*應用關鍵幀*/
.bounce{
animation-name: bounce;
animation-duration: 1s;
animation-fill-mode: both;
}

上面的代碼中，@keyframes關鍵字定義了bounce動畫的關鍵幀，包括了從初始狀態到最終狀態的所有形態，通過指定時間曲線來控制動畫的速度和緩動效果。在定義關鍵幀的過程中，transform屬性被用來實現動畫效果。

而在最后一行代碼中，.bounce類被定義為應用關鍵幀的選擇器，通過設置animation-name，animation-duration和animation-fill-mode屬性來指定動畫的名稱、時間和結束時的狀態。

最終，在HTML中加入了<div class="bounce"></div>來應用該動畫效果，就可以看到非常生動的bounce效果了。