Skip to content

Commit 184d63c

Browse files
AnormeAnorme
authored
adding my animation to the project (#2892)
1 parent 677c2b6 commit 184d63c

File tree

3 files changed

+116
-0
lines changed

3 files changed

+116
-0
lines changed

‎Art/anorme-loading/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Animation Nation challenge</title>
7+
<link rel="stylesheet" type="text/css" href="styles.css">
8+
</head>
9+
10+
<body>
11+
<h1> Loading . . . <h1>
12+
13+
<div class="wrapper">
14+
<div id="box-1"></div>
15+
<div id="box-2"></div>
16+
<div id="box-3"></div>
17+
</div>
18+
19+
</body>
20+
</html>

‎Art/anorme-loading/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "loading",
3+
"githubHandle": "anorme"
4+
}

‎Art/anorme-loading/styles.css‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
:root {
2+
--color1: pink;
3+
--color2: beige;
4+
--color3: lightcyan;
5+
}
6+
p {
7+
margin: 0px;
8+
}
9+
10+
h1 {
11+
text-align: center;
12+
height: 20px;
13+
margin: 20px auto;
14+
color:lightsteelblue;
15+
}
16+
17+
.wrapper {
18+
display: flex;
19+
margin:40px auto ;
20+
background-color: lightslategray;
21+
position: relative;
22+
height: 200px;
23+
justify-content: center;
24+
align-items: center;
25+
26+
27+
}
28+
29+
#box-1, #box-2, #box-3 {
30+
width: 100px;
31+
height: 100px;
32+
margin: 20px auto;
33+
line-height:100px;
34+
text-align: center;
35+
animation-duration: 4s;
36+
animation-direction: reverse;
37+
animation-iteration-count: infinite;
38+
39+
}
40+
41+
#box-1 {
42+
background-color: pink;
43+
animation-name: change-color1;
44+
}
45+
46+
#box-2 {
47+
background-color: beige;
48+
animation-name: change-color2;
49+
50+
}
51+
52+
#box-3 {
53+
background-color: lightcyan;
54+
animation-name: change-color3;
55+
56+
}
57+
58+
@keyframes change-color1 {
59+
0% {background-color: var(--color1);
60+
transform: scale(1.0);}
61+
25% {background-color: var(--color2);
62+
transform: scale(1.0);}
63+
50% {background-color: var(--color3);
64+
transform: scale(1.0);}
65+
75% {background-color: var(--color1);
66+
transform: scale(1.2);}
67+
100% {transform: scale(1.0);}
68+
}
69+
70+
@keyframes change-color2 {
71+
0% {background-color: var(--color2);
72+
transform: scale(1.0);}
73+
25% {background-color: var(--color3);
74+
transform: scale(1.0);}
75+
50% {background-color: var(--color1);
76+
transform: scale(1.2);}
77+
75% {background-color: var(--color2);
78+
transform: scale(1.0);}
79+
100% {transform: scale(1.0);}
80+
}
81+
82+
@keyframes change-color3 {
83+
0% {background-color: var(--color3);
84+
transform: scale(1.0)}
85+
25% {background-color: var(--color1);
86+
transform: scale(1.2);}
87+
50% {background-color: var(--color2);
88+
transform: scale(1.0)}
89+
75% {background-color: var(--color3);
90+
transform: scale(1.0)}
91+
100% {transform: scale(1.0)}
92+
}

0 commit comments

Comments
 (0)