I am currently learning HTML/CSS3 basics and I came to the transition/animation chapter. To test my understanding of the subject I threw myself a challenge : create a loading page made out of CSS-only animation.
The charging bar is made of 5 white rectangles with red borders, that go red every 0,1 to show that it is charging, and at the end of the loop go blanck again and repeat.
So I first tried to create an animation white first rectangle's background-color changed to red at 20% of the 0,5s animation and so on... It failed, because I have no clue of how to change multiple element within the same animation. Then I figured that it would be easier to make each rectangle from state "blanck" to state "red" even though it takes a lot more lines of code.
Only problem, as you can see with my code below, the first rectangle doesn't go red whereas the others do, and I can make it go backward at the end.
Could anyone give me a clue about how to make this transition works, then give me a hint/documentation about how to make it works with an animation ?
<!DOCTYPE html>
<html>
<head>
<title>Loading</title>
<link rel="stylesheet" type="text/css" href="loading.css">
</head>
<body>
<div class="big_div">
<div id="title"> <p class="main_title"> L O A D I N G</p> </div>
<div class="carre" id="premiers_carre"></div>
<div class="carre" id="deuxieme_carre"></div>
<div class="carre" id="troisieme_carre"></div>
<div class="carre" id="quatrieme_carre"></div>
<div class="carre" id="cinquieme_carre"></div>
</div>
</body>
</html>
p
{
font-family: "Press start 2P";
}
#title {
position: absolute;
left : 530px;
top : 280px ;
}
.big_div
{
width: 1250px;
height: 700px;
display :flex;
flex-direction : row;
justify-content: center;
align-items: center;
}
.carre
{
background-color: white;
border: 1px red solid;
width: 80px;
height: 10px;
margin-right: 5px;
}
#premier_carre
{
transition-property: background-color;
transition-delay: 0.1s;
}
#deuxieme_carre
{
transition-property: background-color;
transition-delay: 0.2s;
}
#troisieme_carre
{
transition-property: background-color;
transition-delay: 0.3s;
}
#quatrieme_carre
{
transition-property: background-color;
transition-delay: 0.4s;
}
#cinquieme_carre
{
transition-property: background-color;
transition-delay: 0.5s;
}
.big_div:hover #premier_carre
{
background-color: red;
}
.big_div:hover #deuxieme_carre
{
background-color: red;
}
.big_div:hover #troisieme_carre
{
background-color: red;
}
.big_div:hover #quatrieme_carre
{
background-color: red;
}
.big_div:hover #cinquieme_carre
{
background-color: red;
}
