Animated Battery

Initial Challenge

Part one of the animated battery was to create a simple animation using HTML, CSS and JavaScript. The challenge was given to me by my manager, Johnny Cairns, from Rural Sourcing Inc when he saw my high interest in front end development and design. I had been going through a refresher of HTML5 as well as learning some new syntax I didn't know before. After I completed the tutorial, he gave me this challenge to complete. This initial version I never put up on my GitHub but I did put up it's predecessor.

I used fontawesome.com to get open source svg icons for the battery and increased the font-size to 48px to get it to it's current size. Within the vanilla JavaScript, I created a function where I would retrieve a variable, get a variable and then use a setTimeout function to literally timeout each image and have it transition to the next, giving it it's smoothing "charging" transition.

Same Challenge but No JavaScript

At the time that I added this section, the Google Sites embed function was not functioning but the code I used to create my animated battery is down below, I hope to have a live example shown soon! I did continue to use icons from Font Awesome and used some modified CSS I took from a tutorial on YouTube. **I hope to have that project updated here on my portfolio soon**

HTML File

CSSAnimation.css File

<!DOCTYPE html>

<html>

<head>

<title>Charging Battery 2</title>

</head>

<body>

</div>

<!--<p> The battery should be charging if I coded this right. Exclusively CSS.</p>

</body>

</html>

.charging {

color: black;

animation: animateCharging 4s linear infinite;

font-size: 300%; position: absolute; top: 50%;

left: 50%; transform: translate(-50%,-50%);

animation: animateCharging 5s linear infinite;

}

.charging:before {

content: ''; position: absolute; top: 0; left: 50%;

background: rgba(0, 0, 0, .3);

}

/* this section talks about how to stack my images (start) */

.battery0 {

position: relative; top: 50%; left: 50%;

transform: translate(-50%,-50%);

animation: animateBattery0 5s linear infinite;

}

.battery1 {

position: absolute; top: 50%; left: 50%;

transform: translate(-50%,-93%);

animation: animateBattery1 5s linear infinite;

}

.battery2 {

position: absolute; top: 50%; left: 50%;

transform: translate(-50%,-93%);

animation: animateBattery2 5s linear infinite;

}

.battery3 {

position: absolute; top: 50%; left: 50%;

transform: translate(-50%,-93%);

animation: animateBattery3 5s linear infinite;

}

.battery4 {

position: absolute; top: 50%; left: 50%;

transform: translate(-50%,-93%);

animation: animateBattery4 5s linear infinite;

}

/* this section talks about how to stack my images (end) */

@keyframes animateBattery0 {

0% {opacity: 1; color: red;}

25% {opacity: 1; color: #ff6600;}

50% {opacity: 1; color: #00cc00; }

75% {opacity: 1; color: blue;}

100% {opacity: 1; color: red;}

}

@keyframes animateBattery1 {

0% {opacity: 0; color: red;}

24% {opacity: 0;}

25% {opacity: 1; color: #ff6600;}

50% { opacity: 1; color: #00cc00;}

75% {opacity: 1; color: blue;}

100% {opacity: 1; color: red; }

}

@keyframes animateBattery2 {

0% {opacity: 0; color: red;}

25% {opacity: 0; color: #ff6600;}

49% {opacity: 0;}

50% {opacity: 1; color: #00cc00;}

75% {opacity: 1; color: blue; }

100% {opacity: 1; color: red;}

}

@keyframes animateBattery3 {

0% {opacity: 0; color: red; }

25% {opacity: 0; color: #ff6600;}

50% {opacity: 0; color: #00cc00;}

74% {opacity: 0; }

75% {opacity: 1; color: blue; }

100% {opacity: 1; color: red; }

}

@keyframes animateBattery4 {

0% {opacity: 0; color: red;}

25% {opacity: 0; color: #ff6600; }

50% {opacity: 0; color: #00cc00;}

75% {opacity: 0; color: blue;}

99% {opacity: 0;}

100% { opacity: 1; color: red;}

}