Анимация заряда батарейки CSS

Html

<div class="battery-head"></div>

<div class="battery-body"> <div class="charge"></div> </div>

CSS

/*Верх батарейки*/

.battery-head {

width: 30px;/*ширина*/

height: 13px;/*высота*/

background: #485460;/*цвет фона*/

margin: 0 auto;

border-top-left-radius: 8px;/*скругление углов*/

border-top-right-radius: 8px;/*скругление углов*/

border: 3px solid #1e272e;/*обводка*/

}

/*Тело батарейки*/ .battery-body {

width: 150px;/*ширина*/

height: 250px;/*высота*/

background: #485460;/*цвет фона*/

position: relative;

margin: 0 auto;

border: 3px solid #1e272e;/*цвет обводки*/

border-radius: 10px;/*скругление углов*/

}

.charge {

width: 100%;/*ширина*/

position: absolute;

bottom: 0;

border-radius: 14px;/*скругление углов*/

animation: battery 3s linear infinite;

}

/*анимация*/ @keyframes battery {

0% {

height: 0%;

background: #e056fd;

} 33% {

height: 33%;

background: #ff3f34;

} 66% {

height: 66%;

background: #fed330;

} 100% {

height: 100%;

background: #4cd137;

}

}