I have a battery animation that is working fine and all, but I can’t seem to get the animation to stay at the last keyframe. The animation is a battery filling and at the last keyframe I have the height at 40% when it’s full and the battery sort of glows, but the animation won’t stay at the keyframe 100%. I have tried using the animation-fill-mode: forwards; but is doesn’t work.
@keyframes battery-charge {
0% {
height: 0%;
background: #ff0000;
filter: drop-shadow(0 0 20px #ff0000);
}
20% {
height: 50%;
background: orange;
filter: drop-shadow(0 0 20px orange);
}
40% {
height: 100%;
background: #00ff00;
filter: drop-shadow(0 0 20px #00ff00);
}
60% {
filter: drop-shadow(0 0 100px #00ff00);
}
70% {
filter: drop-shadow(0 0 0px #00ff00);
}
90% {
filter: drop-shadow(0 0 100px #00ff00);
opacity: 1;
}
95% {
background-color: #00ff00;
}
100% {
filter: drop-shadow(0 0 100px #00ff00);
opacity: .5;
background: #00ff00;
}
}
.battery-body {
width: 100px;
height: 200px;
background: transparent;
position: relative;
margin: 0 auto;
border: 4px solid #fff;
border-radius: 18px;
}
.charge {
width: 100%;
position: absolute;
bottom: 0;
border-radius: 14px;
animation: battery-charge 7s linear 1;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
z-index: -1;
}<div class="battery-body">
<div class="charge"></div>
</div>I was trying to use animation-fill-mode: forwards;. I was expecting it to work perfectly fine but it didn’t. The inside of the battery just went to the background color after the last keyframe. Thanks for helping!
2
Answers
you also need to have a background property and filter property on your charge class to begin with otherwise it still fades out