在前端開發的過程中，有時候我們需要自己手寫一些動畫效果，這時候 CSS 動畫就派上用場了。本文將介紹如何使用 CSS 來制作一個電池充電的動畫，通過動畫的形式向用戶呈現電池的充電過程。

.container {
width: 30px;
height: 50px;
background-color: #dfe1e5;
position: relative;
margin: 50px auto;
}
.battery {
width: 26px;
height: 40px;
background-color: #fff;
border: 2px solid #adb5bd;
border-radius: 5px;
position: absolute;
top: 5px;
left: 2px;
}
.battery::after {
content: '';
width: 4px;
height: 10px;
background-color: #000;
position: absolute;
bottom: -12px;
left: 11px;
border-radius: 2px;
}
.inner {
position: absolute;
top: 2px;
left: 2px;
height: 36px;
border-radius: 5px;
overflow: hidden;
background-image: linear-gradient(to bottom, #00adb5, #00adb5 50%, #dfe1e5 50%, #dfe1e5);
background-size: 100% 200%;
animation: pulse 2s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
}
@keyframes pulse {
to {
background-position: 0 -200%;
}
}

以上就是本文所介紹的 CSS 代碼，其中 .container 是容器的樣式，.battery 是電池的樣式，.inner 是電池內部的樣式。在 .inner 樣式中，通過使用動畫來實現電池充電的效果。animation 屬性可以設置動畫的持續時間、變化速率以及播放次數等。這里我們使用了無限循環的動畫，讓電池內部的顏色不斷變化。同時，我們還使用了 background-image 屬性和 linear-gradient 函數來實現了階梯狀的顏色漸變效果。這樣可以讓電池的充電效果更加真實。

最后，為了讓電池充電的效果更加生動，我們可以結合 JavaScript 代碼來實現讓電池不斷充電和放電的效果，同時加入一些音效，讓用戶體驗更加豐富。