4.3K
Pure CSS Battery Charging Animation
Hello, friends in this post I am going to make Pure CSS Battery Charging Animation. You can easily create the battery charging animation using HTML and CSS. I have mentioned the source code below. Just copy the given source code and paste it into your text editor and edit according to your requirement.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Battery Charging Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="battery"></div>
</body>
</html>
CSS
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #282833;
}
.battery{
height: 110px;
width: 225px;
border: 8px solid #ffffff;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 12px;
}
.battery:before{
content: "";
position: absolute;
margin: auto;
height: 55px;
width: 20px;
background-color: #ffffff;
right: -25px;
top: 0;
bottom: 0;
border-radius: 0 7px 7px 0;
}
.battery:after{
content: "";
position: absolute;
height: 80px;
width: 40px;
background-color: #ffffff;
margin: auto;
top: 0;
bottom: 0;
left: 10px;
border-radius: 5px;
box-shadow: 50px 0 transparent,
100px 0 transparent,
150px 0 transparent;
animation: charge 4s infinite;
}
@keyframes charge{
22%{
box-shadow: 50px 0 transparent,
100px 0 transparent,
150px 0 transparent;
}
25%{
box-shadow: 50px 0 #ffffff,
100px 0 transparent,
150px 0 transparent;
}
47%{
box-shadow: 50px 0 #ffffff,
100px 0 transparent,
150px 0 transparent;
}
50%{
box-shadow: 50px 0 #ffffff,
100px 0 #ffffff,
150px 0 transparent;
}
72%{
box-shadow: 50px 0 #ffffff,
100px 0 #ffffff,
150px 0 transparent;
}
75%{
box-shadow: 50px 0 #ffffff,
100px 0 #ffffff,
150px 0 #ffffff;
}
95%{
box-shadow: 50px 0 #ffffff,
100px 0 #ffffff,
150px 0 #ffffff;
}
}
For More Tutorial Please Click Here
