今天我想向大家分享一個(gè)我制作的CSS小動(dòng)畫，它很簡(jiǎn)單但是非常有趣。

.box {
width: 100px;
height: 100px;
background-color: #f00;
position: relative;
animation: bounce 1s ease-in-out infinite;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}

這個(gè)小動(dòng)畫實(shí)現(xiàn)了box元素在垂直方向上的彈跳效果。我們首先定義box元素的屬性，寬度和高度都是100px，背景色為紅色。我們把它的position屬性設(shè)置為relative，以便我們控制它的位置。

接著，我們來到了最重要的部分：動(dòng)畫。我們用“@keyframes”關(guān)鍵字來定義動(dòng)畫，而“bounce”是我們給它起的名字。bounce動(dòng)畫包含了三個(gè)關(guān)鍵幀，分別是0%、50%和100%。

在0%和100%這兩個(gè)關(guān)鍵幀上，我們通過transform屬性把box元素在Y軸上平移0個(gè)像素。而在50%關(guān)鍵幀上，我們把它平移了-20個(gè)像素。這樣，元素在播放動(dòng)畫時(shí)就會(huì)在垂直方向上彈起，并在落下時(shí)回到初始位置。

最后，我們將動(dòng)畫屬性賦給了box元素，以實(shí)現(xiàn)動(dòng)態(tài)效果。我們?cè)O(shè)定它的持續(xù)時(shí)間為1秒，并設(shè)置了ease-in-out的緩動(dòng)函數(shù)。最后，我們讓它無限循環(huán)播放，直到頁面關(guān)閉。

這就是我的CSS小動(dòng)畫，非常簡(jiǎn)單，但是很有趣。我希望你們也能做出一些有趣的動(dòng)畫，并享受制作的過程。謝謝你們的閱讀！