CSS動畫是前端開發中非常重要的一部分，它可以為網站帶來生動的效果和交互體驗。今天我們要介紹的是一個很可愛的小熊動畫，它可以在原地蹦蹦跳跳，非常有趣。

.bear {
background-image: url('bear.png');
background-repeat: no-repeat;
background-position: center;
width: 100px;
height: 100px;
animation: bearJump 1s ease-in-out infinite;
}
@keyframes bearJump {
0%,
100% {
transform: translateY(0);
}
20% {
transform: translateY(-16px);
}
40%,
60% {
transform: translateY(0px);
}
80% {
transform: translateY(-8px);
}
}

在上面的代碼中，我們首先定義了一個名為.bear的class，然后設置了小熊的背景圖片、寬度、高度和動畫屬性。接著我們使用@keyframes定義了動畫的各個階段，其中0%和100%表示小熊的原始位置，20%和80%分別表示小熊向上和向下跳躍的位置，40%和60%表示小熊的原始位置和跳躍中間位置。

最后，我們將bearJump動畫應用到.bear類中，并設置動畫的時長為1秒、緩動函數為ease-in-out、無限循環播放。

現在我們已經完成了小熊動畫的代碼，接下來只需要將代碼復制到HTML文件中，在需要用到小熊的地方添加class=".bear"即可。

希望大家能夠喜歡并成功地實現這個可愛的小熊動畫。